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

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



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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 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;
          }
        }
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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_right

    
    

    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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.