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