#e8e8e8
1.button { 2 padding: 15px 20px; 3 font-size: 16px; 4 background: transparent; 5 border: none; 6 position: relative; 7 color: #f0f0f0; 8 z-index: 1; 9} 10 11.button::after, 12.button::before { 13 content: ''; 14 position: absolute; 15 bottom: 0; 16 right: 0; 17 z-index: -99999; 18 transition: all .4s; 19} 20 21.button::before { 22 transform: translate(0%, 0%); 23 width: 100%; 24 height: 100%; 25 background: #28282d; 26 border-radius: 10px; 27} 28 29.button::after { 30 transform: translate(10px, 10px); 31 width: 35px; 32 height: 35px; 33 background: #ffffff15; 34 backdrop-filter: blur(5px); 35 border-radius: 50px; 36} 37 38.button:hover::before { 39 transform: translate(5%, 20%); 40 width: 110%; 41 height: 110%; 42} 43 44.button:hover::after { 45 border-radius: 10px; 46 transform: translate(0, 0); 47 width: 100%; 48 height: 100%; 49} 50 51.button:active::after { 52 transition: 0s; 53 transform: translate(0, 5%); 54}
8K views
8K views
Comments
MIT License