Related Articles

Related Articles

CSS | Animation to Change the Hover State of a Button/Image
  • Last Updated : 31 Jul, 2019
  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
Recommended Articles
Page :