#212121
1button { 2 background: none; 3 border: none; 4 padding: 15px 15px; 5 border-radius: 10px; 6} 7 8button:hover { 9 background: rgba(170, 170, 170, 0.062); 10 transition: 0.5s; 11} 12 13button svg { 14 color: #fff; 15} 16 17button:active { 18 animation-name: shake; 19 animation-duration: 0.5s; 20 animation-iteration-count: 1; 21} 22 23@keyframes shake { 24 0% { 25 transform: translateX(0); 26 } 27 28 10% { 29 transform: translateX(-10px); 30 } 31 32 20% { 33 transform: translateX(10px); 34 } 35 36 30% { 37 transform: translateX(-10px); 38 } 39 40 40% { 41 transform: translateX(10px); 42 } 43 44 50% { 45 transform: translateX(-10px); 46 } 47 48 60% { 49 transform: translateX(10px); 50 } 51 52 70% { 53 transform: translateX(-10px); 54 } 55 56 80% { 57 transform: translateX(10px); 58 } 59 60 90% { 61 transform: translateX(-10px); 62 } 63 64 100% { 65 transform: translateX(0); 66 } 67} 68
Comments
MIT License