#e8e8e8
1.button { 2 width: 140px; 3 height: 40px; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 gap: 10px; 8 background: linear-gradient(to left,rgb(173, 154, 255),rgb(149, 110, 255)); 9 border-radius: 30px; 10 color: rgb(255, 255, 255); 11 font-weight: 600; 12 border: none; 13 position: relative; 14 cursor: pointer; 15 transition-duration: .2s; 16 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.116); 17} 18 19.bell { 20 width: 13px; 21} 22 23.bell path { 24 fill: rgb(255, 255, 255); 25} 26 27.button:hover { 28 background: linear-gradient(to left,rgb(154, 131, 255),rgb(135, 91, 255)); 29} 30 31.button:active { 32 transform: scale(0.97); 33 transition-duration: .2s; 34} 35 36.button:hover .bell { 37 animation: bellRing 0.9s both; 38} 39 40/* bell ringing animation keyframes*/ 41@keyframes bellRing { 42 0%, 43 100% { 44 transform-origin: top; 45 } 46 47 15% { 48 transform: rotateZ(10deg); 49 } 50 51 30% { 52 transform: rotateZ(-10deg); 53 } 54 55 45% { 56 transform: rotateZ(5deg); 57 } 58 59 60% { 60 transform: rotateZ(-5deg); 61 } 62 63 75% { 64 transform: rotateZ(2deg); 65 } 66} 67
759 views
759 views
Comments
MIT License