How to create Shaky button using HTML and CSS ?
The shaky button is a type of button effect which was introduced in the past decade. It is one of the least used effects that we used to style a button. This can be used whenever a button is acting like a snooze button.
Approach: The approach for creating this animation is the use of the skewX() function with keyframes to animate the skew angle on each frame.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
HTML Section: In this section, the basic HTML page structure is defined and a new button is created that would be later styled with CSS.
CSS Section: In this section, we will style the button and apply animations to it to get the desired effect. The steps given below are to be followed:
- Step 1: Create a new class that will be used to style the button. Apply basic styling to this button class like margin, padding, and some border to space out and position the button.
- Step 2: Use skewX() function to tilt the button to a particular angle on the x-axis. The angle should be a negative value for the first time.
- Step 3: Use the hover selector to apply the animation and effects when the button is being hovered over.
- Step 4: Use keyframes to create the animation using the skew function. The order of angle should be alternate between the original negative angle and its positive value. One frame could be divided into multiple frames by specifying how many times the button would shake.
Tip: The use of the :before selector is completely optional, one can style the button with a different effect, however, it has to be made sure that the angle values are used alternatively, one being positive and other being negative,
Complete Code: It is the combination of the above two sections of code.