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: 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:

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

Output:
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:

My Personal Notes

Recommended Posts: