Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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=
         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 arrow_drop_up
Recommended Articles
Page :