Shake a Button on Hover using HTML and CSS

How to Shake Text on hover using HTML and CSS?

Last Updated : 02 Aug, 2024

Shaking Text animation is a very cool animation which can be used in websites, this animation can be easily created using some basic HTML and CSS, the below section will guide on how to create the animation.

HTML Code: In this section we have a basic div element which contains some text inside of it.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Shake Text</title>
</head>
<body>
  <div>
    <h2>Shake!</h2>
  </div>      
</body>
</html>

CSS Code: In this section first we will design the text with some basic CSS and use @keyframes animation and then use the transitionX() function to produce the shaking effect when we hover over the text.

html

<style>
 *{
    margin: 0;
    padding: 0;
  }
  /* designing the text*/
  div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5em;
    color: rgb(4, 110, 4);
  }
  /*creating the shake animation*/
  
  div:hover h2{
    animation:  shake 0.8s  ;
  }

  @keyframes shake{
    0%{
      transform: translateX(0)
    }
    25%{
      transform: translateX(25px);
    }
    
    50%{
      transform: translateX(-25px);
    }
    100%{
      transform: translateX(0px);
    }
  }
  
 </style>

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

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Shake Text</title>
</head>
<style>
  *{
     margin: 0;
     padding: 0;
   }
   /* designing the text*/
   div{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 2.5em;
     color: rgb(4, 110, 4);
   }
   /*creating the shake animation*/
   
   div:hover h2{
     animation:  shake 0.8s  ;
   }
 
   @keyframes shake{
     0%{
       transform: translateX(0)
     }
     25%{
       transform: translateX(25px);
     }
     
     50%{
       transform: translateX(-25px);
     }
     100%{
       transform: translateX(0px);
     }
   }
   
  </style>

<body>
  <div>
    <h2>Shake!</h2>
  </div>   
    
</body>
</html>

Output:

Shake a Button on Hover using HTML and CSS

L

lakshgoel204

Improve

Article Tags :

Similar Reads

How to Skew Text on Hover using HTML and CSS?

Skewed text animation effect can be created using HTML and CSS, this animation looks very cool and can be used in websites to make them look more dynamic, the following sections will guide on how to create the desired animation effect.First Section: In this section we will create a basic div tag whi

Shrink Text on Hover using HTML and CSS

Text can be Shrinked or condensed using some HTML and CSS properties, you can use this animation in your websites as headings or sub-headings, the below sections will guide you on how to create the desired effect.HTML Code: In this section we have simple divÂ element which contains the text separate

How to spin text on mouse hover using HTML and CSS?

The spinning of text on mouse hover is known as the Spin Effect or the Rotation Effect. In this effect, each alphabet of the word is rotated along with any one of the axes (preferably Y-axis). Each word is wrapped inside in <li> tag and then using CSS:hover Selector selector we will rotate eac

How to Rotate a Text 360 Degrees on hover using HTML and CSS?

Rotating text 360 degrees on hover is a visual effect that makes text spin around its center point when the user hovers their cursor over it. To rotate text 360 degrees on hover using HTML and CSS, you can apply a CSS animation to the text element.Rotate A Text 360 Degrees On HoverThe text is center

Shake a Button on Hover using HTML and CSS

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 w

How to Create Ghost Text Animation on Hover using HTML and CSS?

Ghost Text Animation can be used to give your website a spooky heading or sub-heading, this effect can be easily created using some simple HTML and CSS.HTML Code: In this section we have a ul tag which consists of some li tags displaying some text.html<!DOCTYPE html> <html lang="en">

How to Change Image Opacity on Hover using CSS ?

Changing the opacity of an image on hover can add a more elegant and interactive effect to your website. This simple yet effective technique can be implemented using CSS. When a user hovers over an image, it gradually becomes more transparent, pointing out the interaction and creating an attractive

How to Apply Shadow Effect on Text Using CSS?

The CSS text-shadow property is used to add a shadow to the text.Adding a shadow to text using CSS text-shadowThe text-shadow property of CSS is used to apply the shadow effect on text. It takes four values verticalShadow, horizontalShadow, blur, and color.Syntaxtext-shadow: verticalShadow horizonta

How to Place Text Over an Image using CSS?

Place Text Over an Image means overlaying text on top of an image using HTML and CSS. This effect is commonly achieved by placing the image and text inside a container and then using CSS techniques like absolute positioning, z-index, or flexbox to position the text over the image.Below are the appro

How to Add Transition on Hover Using CSS?

Transitions are the CSS technique used to create smooth changes between property values over a specified duration. By defining a transition, you can animate properties such as color, size, or position, making changes appear gradual rather than abrupt. For hover effects, transitions can enhance user