CSS | Animation to Change the Hover State of a Button/Image
- To change the color/size of the button in hover state.
Approach:- Set the animaion and time duration of hover state
- Set background color using @keyframes
Syntax:
button:hover { animation-name: background-color; animation-duration: 500ms; } @keyframes background-color { 100% { background-color:#4065F3; } }
Examples:
<!DOCTYPE html>
<html>
<head>
Color Change of button on hovering
</head>
<style>
button {
border-radius:
5px
;
color
:
white
;
background-color
:
#368508
;
padding
:
5px
10px
8px
10px
;
}
/*Button hover state*/
button:hover {
animation-name: background-color;
animation-duration:
500
ms;
}
/*keyframes*/
@keyframes background-color {
100%
{
background-color
:
#4065F3
;
}
}
</style>
<body>
<br>
<br>
<button>GeeksforGeeks</button>
</body>
</html>
chevron_rightfilter_noneOutput:
Initially the button looks like this:
On hovering it changes to this:
- To change the color/size of the image in the hover state.
Approach:
- Set the animaion and time duration of hover state
- Set the image size using @keyframes
Syntax:
img:hover { animation-name: breadth; animation-duration: 500ms; } @keyframes breadth { 50% { width: 400px; } 100% { width: 600px; } }
<!DOCTYPE html>
<
html
>
<
head
>
Size Change of image on hovering
</
head
>
<
style
>
img:hover {
animation-name: breadth;
animation-duration: 500ms;
}
@keyframes breadth {
50% {
width: 400px;
}
100% {
width: 600px;
}
}
</
style
>
<
body
>
<
img
src
=
alt
=
"GeeksforGeeks Logo"
/>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
Initially the size of image is this:
On hovering its size diminishes to this at half duration time:
And then again to original size on completion of duration of time: