Open In App

Shake a Button on Hover using HTML and CSS

Improve
Improve
Like Article
Like
Save
Share
Report

The shake button effect also known as the wiggle effect can be used to make the website look more responsive and dynamic. This is one of the best effects to understand the concept of @keyframes rule in CSS.

Approach: The shake button effect or animation can be created using HTML and CSS, First, we will create a basic button using HTML and then we will use the @keyframes rule to specify the animation code. The below sections will guide you on how to create the effect.

HTML Code: In this section, we will create a basic button using the button tag.




<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>Shake Button on Hover</title>
</head>
  
<body>
    <div>
        <button id="btn">Button</button>
    </div>
</body>
  
</html>


CSS Code: In this section, first we will design the button using CSS basic properties, then to create the shake effect or animation we will use the @keyframes rule, we will use the translateX() and rotate() functions to reposition the button element on x axis the create the desired effect when we hover over it.




<style>
    body {
        margin: 0;
        padding: 0;
    }
  
    div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
  
    #btn {
        text-align: center;
        height: 60px;
        width: 200px;
        display: block;
        font-size: 1.5em;
        background: #68E73C;
    }
  
    #btn:hover {
        animation: effect 0.4s infinite;
    }
  
    @keyframes effect {
        0% {
            transform: translateX(0px) rotate(0deg);
        }
  
        20% {
            transform: translateX(-4px) rotate(-4deg);
        }
  
        40% {
            transform: translateX(-2px) rotate(-2deg);
        }
  
        60% {
            transform: translateX(4px) rotate(4deg);
        }
  
        80% {
            transform: translateX(2px) rotate(2deg);
        }
  
        100% {
            transform: translateX(0px) rotate(0deg);
        }
    }
</style>


Complete Code: It is the combination of the above two code sections.




<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>Shake Button on Hover</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
  
        div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
  
        #btn {
            text-align: center;
            height: 60px;
            width: 200px;
            display: block;
            font-size: 1.5em;
            background: #68E73C;
        }
  
        #btn:hover {
            animation: effect 0.4s infinite;
        }
  
        @keyframes effect {
            0% {
                transform: translateX(0px) rotate(0deg);
            }
  
            20% {
                transform: translateX(-4px) rotate(-4deg);
            }
  
            40% {
                transform: translateX(-2px) rotate(-2deg);
            }
  
            60% {
                transform: translateX(4px) rotate(4deg);
            }
  
            80% {
                transform: translateX(2px) rotate(2deg);
            }
  
            100% {
                transform: translateX(0px) rotate(0deg);
            }
        }
    </style>
</head>
  
<body>
    <div>
        <button id="btn">Button</button>
    </div>
</body>
  
</html>


Output:



Last Updated : 08 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads