CSS Animation Button — PBA Institute CSS Tutorial
Chapter 12 · CSS Tutorial Series
10 min read Beginner

CSS Animation Button

CSS Animation Buttons turn static buttons into interactive UI elements that respond to hover, focus, and click. Using transition, transform, and @keyframes, you can create smooth, attention-grabbing button effects.

Why Animate Buttons?

  • Better feedback: Animation signals to users that an action is happening.
  • Visual delight: Smooth motion makes the UI feel modern and polished.
  • Increased engagement: Animated CTAs draw more clicks than static ones.
  • Brand personality: Custom animations add character to your product.

Common Button Animation Techniques

✨

Hover Color Change

Smoothly change background or text color on hover.

📈

Scale Up

Use transform: scale() to grow on hover.

💫

Shadow Lift

Add a soft shadow to give a lifted look.

🌊

Ripple Effect

Animate a circular wave from the click point.

➡️

Slide Underline

Animate an underline from left to right.

🎆

Glow / Pulse

Use @keyframes for continuous glow.

Animation Button Syntax

Button Animation Syntax 
button {
    padding: 12px 28px;
    background: #1a73e8;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all .3s ease;
}
button:hover {
    background: #0d47a1;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,.2);
}

/* Pulse animation */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
.pulse { animation: pulse 1.5s infinite; }

Float Right Button

Full HTML + CSS Code 
<!DOCTYPE html>

<html>

<head>

<style>

button{

    background:tomato;
    border:none;
    border-radius:6px;

    color:white;

    padding:15px 22px;

    font-size:18px;

    transition:
    all 0.3s ease-out;

}

button:hover{

    cursor:pointer;

    transform:
    translateX(8px);

}

</style>

</head>

<body>

<button>
Float Right
</button>

</body>

</html>
Output

Float Left Button

Full HTML + CSS Code 
<!DOCTYPE html>

<html>

<head>

<style>

button{

    background:tomato;
    border:none;

    border-radius:6px;

    color:white;

    padding:15px 22px;

    font-size:18px;

    transition:
    all 0.3s ease-out;

}

button:hover{

    cursor:pointer;

    transform:
    translateX(-8px);

}

</style>

</head>

<body>

<button>
Float Left
</button>

</body>

</html>
Output

Rotate Left Button

Full HTML + CSS Code 
<!DOCTYPE html>

<html>

<head>

<style>

button{

    background:tomato;
    border:none;

    border-radius:6px;

    color:white;

    padding:15px 22px;

    font-size:18px;

    transition:
    transform 0.3s ease;

}

button:hover{

    cursor:pointer;

    transform:
    rotate(-5deg);

}

</style>

</head>

<body>

<button>
Rotate Left
</button>

</body>

</html>
Output

Pop Animated Button

Full HTML + CSS Code 
<!DOCTYPE html>

<html>

<head>

<style>

button{

    background:tomato;
    border:none;

    border-radius:6px;

    color:white;

    padding:15px 22px;

    font-size:18px;

}

button:hover{

    cursor:pointer;

    animation:
    hover-pop 0.3s linear 1;

}

@keyframes hover-pop{

    50%{

        transform:
        scale(1.2);

    }

}

</style>

</head>

<body>

<button>
Pop Button
</button>

</body>

</html>
Output

Full Example

HTML + CSS Code 
<!DOCTYPE html>
<html>
<head>
    <title>Animation Button</title>
    <style>
        body { display: flex; gap: 20px; justify-content: center; padding: 60px; background: #f5f7fa; font-family: Arial; }
        button {
            padding: 14px 30px;
            font-size: 16px;
            color: #fff;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all .3s ease;
        }
        .lift   { background: #1a73e8; }
        .lift:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(26,115,232,.3); }

        .grow   { background: #00bcd4; }
        .grow:hover { transform: scale(1.1); }

        .glow   { background: #d81b60; animation: glow 1.5s infinite; }
        @keyframes glow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(216,27,96,.6); }
            50%      { box-shadow: 0 0 0 12px rgba(216,27,96,0); }
        }
    </style>
</head>
<body>
    <button class="lift">Lift</button>
    <button class="grow">Grow</button>
    <button class="glow">Glow</button>
</body>
</html>
Output Three colorful buttons with lift, grow, and pulsing glow animations on hover.

Code Explanation

  • transition: all .3s ease: Smoothly animates every property over 0.3s.
  • transform: translateY(-4px): Lifts the button up on hover.
  • transform: scale(1.1): Grows the button by 10%.
  • @keyframes glow: Creates a pulsing ring effect using box-shadow.
  • animation: glow 1.5s infinite: Loops the glow animation forever.

Animation Properties

Property Purpose Example
transition Smooth property change all .3s ease
transform Scale, rotate, translate scale(1.1)
animation Run @keyframes pulse 1.5s infinite
@keyframes Define animation steps 0% { } 100% { }
animation-delay Delay before start 0.5s
animation-iteration-count How many times infinite

Animation Categories

Lift Effect

Use translateY and box-shadow.

Scale Effect

Use scale() to grow on hover.

Glow / Pulse

Use keyframes + box-shadow for pulsing rings.

Animation Symbols

Transition
all .3s ease ease-in-out linear
Transform
scale() translate() rotate() skew()
Animation
@keyframes infinite alternate

Important Notes

  • Use transition for hover: It's the simplest way to animate property changes.
  • Use @keyframes for loops: Keyframes are ideal for continuous or multi-step animations.
  • Performance tip: Animate transform and opacity for GPU acceleration.
  • Accessibility: Respect prefers-reduced-motion to disable animations when needed.

Real-World Use Cases

Call to Action

Animated CTAs improve conversion rates.

Interactive UI

Hover effects guide user interaction.

Notification Buttons

Pulse effect draws attention to new updates.

Practice Questions

  • Create a button that scales to 110% on hover.
  • Add a shadow lift effect using translateY and box-shadow.
  • Use @keyframes to create a pulsing glow animation.
  • Animate a button's background gradient on hover.
  • Make a button that rotates 5 degrees on hover.

Frequently Asked Questions

  • Difference between transition and animation: Transition animates between two states (hover) while @keyframes animation defines multi-step continuous animations.
  • How to make an animation loop: Use animation-iteration-count: infinite.
  • Why use transform instead of left/top: Transform is GPU-accelerated and smoother than animating position properties.
  • How to slow down an animation: Increase the duration value, e.g. animation: pulse 3s infinite.

Conclusion

Animated buttons make web interfaces feel alive. By combining transitions, transforms, and keyframe animations, you can create CTAs that grab attention, delight users, and boost engagement.

CSS All Topics

Introduction Selectors Style Sheet Insertion CSS Color CSS Backgrounds CSS Border CSS Margin CSS Table CSS Text Fonts CSS Links Animation Button Transition Cursor Type Navbar Layout Login Page Image Slider

Continue Learning

Previous

Go to CSS Links Chapter

Next

Go to Transition Chapter