Article Categories

Selected Reading

Shake a Button on Hover using HTML and CSS

HTML CSS Web Development Front End Technology

To shake a button on hover using HTML and CSS, we should have basic understanding of CSS animations and keyframes. We will be understanding how to utilize CSS animation and keyframes to apply shaking effect to a button on hovering.

Syntax

.button:hover {
    animation: shake-name duration timing-function iteration-count;
}

@keyframes shake-name {
    0%, 100% { transform: transform-function(start-value); }
    50% { transform: transform-function(end-value); }
}

Method 1: Rotational Shake Effect

The following example creates a button that shakes by rotating left and right when hovered

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50vh;
    }
    
    .btn {
        text-align: center;
        padding: 10px 20px;
        border: 1px solid #031926;
        border-radius: 5px;
        background-color: #031926;
        color: white;
        font-size: 15px;
        cursor: pointer;
    }
    
    .btn:hover {
        background-color: white;
        color: #031926;
        animation: shaking 0.3s linear 2;
    }
    
    @keyframes shaking {
        0%, 50%, 100% {
            transform: rotate(0deg);
        }
        20% {
            transform: rotate(-5deg);
        }
        70% {
            transform: rotate(5deg);
        }
    }
</style>
</head>
<body>
    <div class="container">
        <button class="btn">Submit</button>
    </div>
</body>
</html>

A dark blue button labeled "Submit" appears centered on the page. When hovered, the button changes to white background with dark blue text and shakes by rotating left and right twice.

Method 2: Multiple Direction Shake Effects

This example demonstrates three different shake animations: horizontal, vertical, and combined movement

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50vh;
        gap: 30px;
    }
    
    .btn {
        text-align: center;
        padding: 10px 20px;
        border: 1px solid #031926;
        border-radius: 5px;
        background-color: #031926;
        color: white;
        font-size: 15px;
        cursor: pointer;
    }
    
    .horizontal:hover {
        background-color: white;
        color: #031926;
        animation: shakingx 0.4s linear 2;
    }
    
    @keyframes shakingx {
        0%, 100% {
            transform: translateX(0);
        }
        25% {
            transform: translateX(-10px);
        }
        75% {
            transform: translateX(10px);
        }
    }
    
    .vertical:hover {
        background-color: white;
        color: #031926;
        animation: shakingy 0.4s linear 2;
    }
    
    @keyframes shakingy {
        0%, 100% {
            transform: translateY(0);
        }
        25% {
            transform: translateY(-10px);
        }
        75% {
            transform: translateY(10px);
        }
    }
    
    .combined:hover {
        background-color: white;
        color: #031926;
        animation: shakingxy 0.4s linear 2;
    }
    
    @keyframes shakingxy {
        0%, 50%, 100% {
            transform: translateX(0) rotate(0deg);
        }
        25% {
            transform: translateX(15px) rotate(7deg);
        }
        75% {
            transform: translateX(-15px) rotate(-7deg);
        }
    }
</style>
</head>
<body>
    <div class="container">
        <button class="btn horizontal">Horizontal</button>
        <button class="btn vertical">Vertical</button>
        <button class="btn combined">Combined</button>
    </div>
</body>
</html>

Three dark blue buttons appear side by side. The first button shakes horizontally (left-right), the second shakes vertically (up-down), and the third combines horizontal movement with rotation when hovered.

Key Properties Used

Property	Purpose
`:hover`	Triggers animation when mouse hovers over the element
`@keyframes`	Defines the shake animation sequence
`transform: rotate()`	Rotates the element by specified degrees
`transform: translateX()`	Moves the element horizontally
`transform: translateY()`	Moves the element vertically
`animation`	Applies the keyframe animation with duration and repetition

Conclusion

CSS animations with keyframes provide an effective way to create shake effects on button hover. You can combine different transform functions like rotate(), translateX(), and translateY() to achieve various shake patterns, making your buttons more interactive and engaging.

Shubham Vora

Updated on: 2026-03-15T16:50:55+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next