Button by Niranjan360
#212121
1.button { 2 cursor: pointer; 3 background-color: black; 4 padding: 8px 25px; 5 border: solid 2px gold; 6 border-radius: 20px; 7 position: relative; 8 overflow: hidden; 9 transition: 0.1s linear 0.1s; 10} 11.button span { 12 color: gold; 13 font-weight: 500; 14 letter-spacing: 2px; 15 position: relative; 16 z-index: 2; 17 transition: 0.2s linear 0.1s; 18} 19.button::after { 20 display: block; 21 content: ""; 22 background-color: gold; 23 width: 300px; 24 height: 300px; 25 border-radius: 50%; 26 position: absolute; 27 top: 100%; 28 transform: translateX(-40%); 29 transition: 0.2s linear 0.1s; 30 z-index: 1; 31} 32.button:hover { 33 box-shadow: 0px 0px 20px gold; 34} 35.button:hover::after { 36 top: -50%; 37} 38.button:hover span { 39 color: black; 40 letter-spacing: 4px; 41} 42
176 views
176 views
MIT License