Button by MuhammadHasann
#212121
1.button-cont { 2 position: relative; 3 width: fit-content; 4 height: fit-content; 5 border-radius: 9999px; 6} 7 8.button-cont::before { 9 content: ""; 10 position: absolute; 11 top: 0%; 12 left: 50%; 13 transform: translate(-50%, -50%); 14 width: 0; 15 height: 0; 16 background: #06b5d4; 17 border-radius: 50%; 18 filter: blur(30px); 19 opacity: 0.8; 20 transition: all 0.6s cubic-bezier(1, 0, 0, 1); 21} 22 23.button-cont:hover::before { 24 width: 100%; 25 height: 25px; 26} 27 28.button { 29 cursor: pointer; 30 position: relative; 31 padding: 20px 48px; 32 background-color: #083344; 33 font-size: 16px; 34 color: #fefefe; 35 font-weight: 500; 36 border: none; 37 border-radius: 9999px; 38 backdrop-filter: blur(4px); 39 box-shadow: inset 0px 1px 1px #67e8f9; 40 transition: all 0.3s ease-in-out, box-shadow 0.1s ease-in-out; 41} 42 43.button::before { 44 content: ""; 45 position: absolute; 46 top: 0; 47 left: 50%; 48 transform: translate(-50%, 0%); 49 width: 0; 50 height: 0; 51 border-radius: 50%; 52 box-shadow: 0px 0px 25px 3px #67e8f97e; 53 transition: all 0.5s cubic-bezier(1, 0, 0, 1); 54} 55 56.button::after { 57 content: ""; 58 position: absolute; 59 top: 0; 60 left: 50%; 61 transform: translate(-50%, 0%); 62 width: 0; 63 height: 0; 64 background-image: linear-gradient( 65 to right, 66 #06b5d400, 67 #4ec4db00, 68 #72d0e200, 69 #90ddea3d, 70 #ace9f277, 71 #ace9f2, 72 #ace9f2, 73 #ace9f277, 74 #90ddea3d, 75 #72d0e200, 76 #4ec3db00, 77 #06b6d400 78 ); 79 border-radius: 0 0 50% 50%; 80 opacity: 0.8; 81 filter: drop-shadow(0px 0px 30px #06b6d4); 82 transition: all 0.5s cubic-bezier(1, 0, 0, 1); 83} 84 85.button-cont:hover .button { 86 background: #18181898; 87 box-shadow: inset 0px 0px 0px #fefefe; 88} 89 90.button-cont:hover .button::before { 91 width: 30%; 92 height: 2px; 93} 94 95.button-cont:hover .button::after { 96 width: 100%; 97 height: 2px; 98} 99
226 views
226 views
MIT License