@DawidMazurek4
Oct 23, 2022588 views
CSSAdd prefixes
1button { 2 width: 7vw; 3 height: 4vh; 4 border-radius: 0.5vw; 5 border: none; 6 background: rgb(0, 1, 65); 7 color: whitesmoke; 8 font-size: 1vw; 9 font-weight: 600; 10 position: relative; 11 z-index: 1; 12 overflow: visible; 13 transition: ease 0.5s; 14} 15 16button::before { 17 z-index: -1; 18 position: absolute; 19 content: ""; 20 width: 2vw; 21 height: 4vh; 22 backdrop-filter: blur(3px); 23 left: calc(100% - 1.5vw); 24 top: calc(100% - 3vh); 25 border-radius: 50%; 26 background: rgba(0,0,0,0.2); 27 transition: ease 0.5s; 28} 29 30button:hover::before { 31 width: 100%; 32 height: 100%; 33 border-radius: 0.5vw; 34 top: 0; 35 left: 0; 36 transform: translateY(-0.5vh); 37} 38 39button:hover { 40 transform: translateY(0.5vh); 41} 42 43button:active::before { 44 transform: translate(0, 5%); 45}
HTML
1<button> 2 Hover me 3</button>