CSS | Animation to Change the Hover State of a Button/Image

Last Updated : 29 Jul, 2021

1. To change the color/size of the button in hover state.

Approach:

Set the animation 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:

HTML

<!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: 500ms;
    }
   
    /*keyframes*/
    @keyframes background-color {
        100% {
            background-color: #4065F3;
        }
    }
</style>
 
<body>
    <br>
    <br>
    <button>GeeksforGeeks</button>
</body>
 
</html>

Output:
Initially, the button looks like this:

On hovering it changes to this:

2. To change the color/size of the image in the hover state

.Approach:

Set the animation 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;
      }
    }

HTML

<!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=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"
         alt="GeeksforGeeks Logo" />
</body>
 
</html>