#212121
1.btn { 2 padding: 10px; 3 border-radius: 5px; 4 font-size: 15px; 5 background-color: black; 6 color: rgb(238, 255, 0); 7 position: relative; 8 overflow: hidden; 9} 10 11.default-text { 12 z-index: 1; 13} 14 15.hover-text { 16 position: absolute; 17 top: 50%; 18 left: 50%; 19 transform: translate(-50%, -50%); 20 opacity: 0; 21 transition: opacity 0.5s ease-in-out; 22} 23 24.btn:hover .default-text { 25 opacity: 0; 26} 27 28.btn:hover .hover-text { 29 opacity: 1; 30 animation: bounce 0.5s ease-in-out; 31} 32 33@keyframes bounce { 34 0% { 35 transform: scale(1); 36 } 37 38 25% { 39 transform: scale(1.2); 40 } 41 42 75% { 43 transform: scale(1.1); 44 } 45 46 100% { 47 transform: scale(1); 48 } 49} 50 51.btn:hover::after { 52 content: ''; 53 position: absolute; 54 top: -10px; 55 left: -10px; 56 width: calc(100% + 20px); 57 height: calc(100% + 20px); 58 border-radius: 50%; 59 background-color: rgba(255, 255, 255, 0.5); 60 opacity: 0; 61 animation: fireworks 1s linear forwards; 62} 63 64@keyframes fireworks { 65 0% { 66 transform: scale(1); 67 opacity: 1; 68 } 69 70 100% { 71 transform: scale(4); 72 opacity: 0; 73 } 74} 75
377 views
377 views
Comments
MIT License