Shake a Button on Hover using HTML and CSS

08 Jun, 2020
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:
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS