HTML Interview Questions and Answers

How to create Shaky button using HTML and CSS?

Last Updated : 15 Jul, 2025

To create a shaky button using HTML and CSS involves adding an animation effect to a button element, making it appear to shake when interacted with. This effect can be used to draw attention to buttons, such as a snooze button or a button requiring immediate action.

Approach

HTML page structure is defined and a new button is created that would be later styled with CSS.
In the CSS, the ".shaky-btn" class styles the button with specific dimensions, background color, font size, and an initial skew transformation for a slanted appearance.
The ".shaky-btn: hover" class defines the hover effect, triggering the shake animation, adding a green border, and changing the text color to green.
The @keyframes shake rule defines the shake animation by alternating the button's skew transformation between -10 and 10 degrees.
When the button is hovered over, the animation smoothly transitions through the defined keyframes, creating a shaking effect.

Example: The example shows how to create a Shaky button using HTML and CSS

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Shaky Button</title>
    <link rel="stylesheet" 
          href="style.css">
</head>

<body>
    <b>
        Creating a shaky button using
        HTML and CSS
    </b>
    <p style="margin: 25px;">

        <!-- Create the shaky button -->
        <button class="shaky-btn">
            GeeksforGeeks
        </button>
    </p>

</body>

</html>

CSS

.shaky-btn {
    width: 200px;
    height: 50px;

    background: white;
    font-size: 24px;
    transform: skewX(-10deg);

    cursor: pointer
}
.shaky-btn:hover {
    animation: shake 0.4s ease-out;
    border: 2px solid green;
    color: green;
}

/* Use the keyframes for defining 
   the animation */
@keyframes shake {
    0% {
        transform: skewX(-10deg);
    }

    25% {
        transform: skewX(10deg);
    }

    50% {
        transform: skewX(-10deg);
    }

    75% {
        transform: skewX(10deg);
    }

    100% {
        transform: skewX(-10deg);
    }
}

Output:

btn — Output

HTML Interview Questions and Answers

S

sirohimukul1999

Improve

Article Tags :

Similar Reads

HTML Interview Questions and Answers

HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts. Below is a curated list of 50+ HTML

Top 10 Projects For Beginners To Practice HTML and CSS Skills

Learning to code is an exciting journey, especially when stepping into the world of programming with HTML and CSSâ€”the foundation of every website you see today. For most beginners, these two building blocks are the perfect starting point to explore the creative side of web development, designing vis

CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or

CSS Interview Questions and Answers

CSS (Cascading Style Sheets) is the language that styles and organizes web pages. It makes websites visually appealing and user-friendly. Mastering CSS is crucial whether you're a beginner or a seasoned developer. This guide presents 60+ CSS interview questions and answers, categorized to help you p

Tailwind CSS Tutorial

Tailwind CSS is a utility-first CSS framework that makes it easy to build custom designs without writing custom CSS. It allows you to apply individual utility classes directly in your HTML, which helps create fully customized layouts with minimal effort.Tailwind provides many utility classes for bui

Introduction to Tailwind CSS

Tailwind CSS is a modern, utility-first class framework that allows developers to style their websites directly within HTML using concise utility classes. Unlike traditional CSS, Tailwind CSS promotes rapid development by eliminating the need to write custom styles for every component. Tailwind CSSW

CSS Introduction

CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the

Types of CSS (Cascading Style Sheet)

CSS is used to style and layout web pages, controlling the appearance of HTML elements. It allows developers to create visually appealing designs and ensure a consistent look across a website.Types of CSSCSS can be implemented in three different ways:Inline CSSInternal or Embedded CSSExternal CSS1.

HTML Login Form

HTML login form is used to authenticate users and grant access to secure sections of a website or application. It typically includes input fields for username/email and password, along with a submit button for logging in. Additionally, there is often an option for new users to create an account or s

Design an Event Webpage using HTML and CSS

Creating an event webpage is an exciting way to showcase information about an event, including its schedule, speakers, and contact details. What Weâ€™re Going to CreateWeâ€™ll create a webpage for a fictional event called "GeeksforGeeks TechCon 2025." This webpage will includeA header introducing the ev