How To Make Button On Hover Using HTML CSS no JavaScript-Ninjas Codez #shorts #button #css #html

In this video you can get a hover style in CSS for your HMTL button without any JavaScript.

Here is CSS code

button {
--color: #560bad;
font-family: inherit;
display: inline-block;
width: 8em;
height: 2.6em;
line-height: 2.5em;
margin: 20px;
position: relative;
overflow: hidden;
border: 2px solid var(--color);
transition: color .5s;
z-index: 1;
font-size: 17px;
border-radius: 6px;
font-weight: 500;
color: var(--color);
}

button:before {
content: "";
position: absolute;
z-index: -1;
background: var(--color);
height: 150px;
width: 200px;
border-radius: 50%;
}
#shorts #button #css #html
button:hover {
color: #fff;
}

button:before {
top: 100%;
left: 100%;
transition: all .7s;
}

button:hover:before {
top: -30px;
left: -30px;
}

button:active:before {
background: #3a0ca3;
transition: background 0s;
}

#shorts #button #css #html