Shake buttons on hover using HTML and CSS-HTML Tutorial-php.cn

Shake buttons on hover using HTML and CSS

WBOY

Release： 2023-09-11 19:41:02

forward

762 people have browsed it

Shake buttons on hover using HTML and CSS

In this tutorial, we will learn to use HTML and CSS to shake a button on user hover. Creating a shake button can make your app's user experience more engaging.

We need to create a custom animation using CSS "keyframe" rules to shake any HTML element. We can then use custom keyframes as the value of the "animation" CSS property to shake the button when the user hovers over it.

grammar

Users can shake the hover button using HTML and CSS following the following syntax.

.btn:hover {
   animation: key_frame_name animation_time repetition;
}
@keyframes key_frame_name {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(10deg);
   }
}

Copy after login

In the above syntax, we created a custom CSS rule to add a shaking animation to the button. Users can replace "animation_time" with a time unit and "repetition" with a number to repeat the animation.

The Chinese translation of

Example

is:

Example

In the example below, we shake the button vertically. We created a normal HTML button using the "button" tag and gave it a "btn" class name. We use the class name to access the button and style it.

In CSS, we use the "animation" property to add a "shake" keyframe to the button when the user hovers over it. In the Shake keyframe, we rotate the button "0 degrees" at 0% of the animation time, "5 degrees" at 20% of the time, "0 degrees" at 50% of the time, and "0 degrees" at 50% of the animation time. Time rotation button "5 degrees" 70% of the time is "0 degrees" and 100% of the time is "0 degrees".

In the output, the user can observe the button shaking in the vertical direction.

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: red;
         color: white;
         font-size: 40px;
      }
      .btn:hover {animation: shaking 0.5s infinite;}
      @keyframes shaking {
         0% {transform: rotate(0deg);}
         20% {transform: rotate(-4deg);}
         50% {transform: rotate(0deg);}
         70% {transform: rotate(4deg);}
         100% {transform: rotate(0deg);}
      }
   </style>
   <body>
      <h2> Shaking the button vertically using HTML and CSS </h2>
      <p> Please hover the cursor over the button below to see the shaking effect.</p>
      <div>
         <button class = "btn"> Submit </button>
      </div>
   </body>
</html>

Copy after login

The Chinese translation of

Example

is:

Example

In the example below, we use HTML and CSS to shake the button horizontally.

We used the CSS property 'transform: translateX()' to shake the button horizontally. First, we move the button in the negative direction. Next, we move the button to its original position. Then, we move the button in the positive direction, and finally, we use CSS's 'keyframes' rule to move the button to its original position.

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: black;
         color: white;
         font-size: 40px;
      }
      .btn:hover {animation: shaking 0.4s infinite;}
      @keyframes shaking {
         0% {transform: translateX(-10px);}
         20% {transform: translateX(-5px);}
         50% {transform: translateX(-5px);}
         70% {transform: translateX(-5px);}
         80% {transform: translateX(10px);}
         90% {transform: translateX(-10px);}
      }
   </style>
   <body>
      <h2> Shaking the button Horizontally using HTML and CSS </h2>
      <p> Please hover the cursor over the button below to see the shaking effect.</p>
      <div>
         <button class = "btn"> Hover the Button </button>
      </div>
   </body>
</html>

Copy after login

The Chinese translation of

Example

is:

Example

In the example below, we will learn how to shake the button horizontally and vertically. We use ‘translateX()’ together with ‘rotate()’ as the value of the ‘transform’ CSS property.

'translateX()' moves the button horizontally, and the 'rotate()' function moves the button vertically. In the output, the user can observe that when they hover over the button, it moves slightly horizontally and vertically. However, the user can increase the parameter value of the ‘translateX()’ function to dither more in the horizontal direction.

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: green;
         color: white;
         font-size: 25px;
      }
      .btn:hover {animation: shaking 0.4s infinite;}
      @keyframes shaking {
         0% {transform: translateX(0) rotate(0deg);}
         25% {transform: translateX(15px) rotate(5deg);}
         50% {transform: translateX(0px) rotate(0deg);}
         75% {transform: translateX(-15px) rotate(-5deg);}
         100% {transform: translateX(0px) rotate(0deg);}
      }
   </style>
   <body>
   <h3> Shaking the button Horizontally and vartically using HTML and CSS</h3>
   <div>
      <button class = "btn"> Point out the Button </button>
   </div>
</body>
</html>

Copy after login

Conclusion

In this tutorial, the user learned to jitter an HTML button using only CSS. In the first example, we learned to shake a button vertically. In the second example, we learned to shake the button horizontally; in the last example, we learned to shake the button horizontally and vertically.

The above is the detailed content of Shake buttons on hover using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!