1. <p class="flash btn"><a>発光するボタンでございます</a></p>
  1. /* 略 */
  2. .btn a:hover {
  3. background-color: #20b2aa;
  4. box-shadow: 0 3px 0 #12978d, 0 6px 0px rgba(0,0,0,0.2);
  5. -webkit-transform: translateY(3px);
  6. transform: translateY(3px);
  7. -webkit-animation: flash 1s;
  8. animation: flash 1s;
  9. }
  10. .btn a:active {
  11. color: #ddd;
  12. background-color: #12978d;
  13. box-shadow: 0 0 0 #047c71, 0 0 0px rgba(0,0,0,0.2);
  14. -webkit-transform: translateY(6px);
  15. transform: translateY(6px);
  16. transition-duration: 0.1s;
  17. }
  18. @-webkit-keyframes flash {
  19. 0% { background-color: #20b2aa; }
  20. 10% { background-color: #96e9e6; }
  21. 100% { background-color: #20b2aa; }
  22. }
  23. @keyframes flash {
  24. 0% { background-color: #20b2aa; }
  25. 10% { background-color: #96e9e6; }
  26. 100% { background-color: #20b2aa; }
  27. }