1. <p class="btn"><a>ボタンでございます</a></p>
  1. .btn a {
  2. display: block;
  3. cursor: pointer;
  4. width: 300px;
  5. margin: 0 auto;
  6. padding: 20px;
  7. border-radius: 5px;
  8. color: #fff;
  9. text-align: center;
  10. text-decoration: none;
  11. background-color: #20b2aa;
  12. box-shadow: 0 6px 0 #047c71, 0 12px 0 rgba(0,0,0,0.2);
  13. -webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
  14. transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
  15. }
  16. .btn a:hover {
  17. background-color: #3cc4bd;
  18. box-shadow: 0 3px 0 #12978d, 0 6px 0px rgba(0,0,0,0.2);
  19. -webkit-transform: translateY(3px);
  20. transform: translateY(3px);
  21. }
  22. .btn a:active {
  23. color: #ddd;
  24. background-color: #12978d;
  25. box-shadow: 0 0 0 #047c71, 0 0 0px rgba(0,0,0,0.2);
  26. -webkit-transform: translateY(6px);
  27. transform: translateY(6px);
  28. transition-duration: 0.1s;
  29. }