How to create button hover animation effect using CSS ?
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
body {
margin: 0;
padding: 0;
height: 40vh;
display: grid;
place-items: center;
background-color: #B3FFAE;
}
::selection {
color: white;
background-color: green;
}
button {
position: relative;
font-size: 18px;
font-weight: bold;
height: 45px;
padding: 10px 20px;
background: white;
overflow: hidden;
border-radius: 10px;
border: 2px solid;
color: #334b79;
z-index: 1;
transition: 0.5s all ease;
}
button:hover {
color: white;
cursor: pointer;
border: 0px;
}
button:active {
transform: scale(0.85);
}
button:before {
content: "";
width: 50%;
height: 100%;
margin: auto;
position: absolute;
top: 0%;
left: -50%;
top: -100%;
background: #379237;
transition: all 0.6s ease;
z-index: -1;
}
button:hover:before {
top: 0;
left: 0;
border: 0px;
transform: rotate(180deg);
}
button:after {
content: "";
width: 50%;
height: 100%;
margin: auto;
position: absolute;
top: 0%;
left: 100%;
top: 100%;
background: #54B435;
transition: all 0.6s ease;
z-index: -1;
}
button:hover:after {
top: 0;
left: 50%;
border: 0px;
transform: rotate(180deg);
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:green"
>
GeeksforGeeks
</
h1
>
<
h2
>
Minimal rotating backdrop button
hover and click animation effect
</
h2
>
<
button
>Geek IN</
button
>
</
body
>
</
html
>
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
body {
margin: 0;
padding: 0;
height: 40vh;
display: grid;
place-items: center;
background-color: #B3FFAE;
}
::selection {
color: white;
background-color: green;
}
button {
position: relative;
font-size: 18px;
font-weight: bold;
height: 45px;
padding: 10px 20px;
background: white;
overflow: hidden;
border-radius: 10px;
border: 2px solid;
color: #334b79;
z-index: 1;
transition: 0.5s all ease;
}
button:hover {
color: white;
cursor: pointer;
border: 0px;
}
button:active {
transform: scale(0.85);
}
button:before {
content: "";
width: 50%;
height: 100%;
margin: auto;
position: absolute;
top: 0%;
left: -50%;
top: -100%;
background: #379237;
transition: all 0.6s ease;
z-index: -1;
}
button:hover:before {
top: 0;
left: 0;
border: 0px;
transform: rotate(180deg);
}
button:after {
content: "";
width: 50%;
height: 100%;
margin: auto;
position: absolute;
top: 0%;
left: 100%;
top: 100%;
background: #54B435;
transition: all 0.6s ease;
z-index: -1;
}
button:hover:after {
top: 0;
left: 50%;
border: 0px;
transform: rotate(180deg);
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:green"
>
GeeksforGeeks
</
h1
>
<
h2
>
Minimal rotating backdrop button
hover and click animation effect
</
h2
>
<
button
>Geek IN</
button
>
</
body
>
</
html
>