Webshs Button Animations - Interactive CSS Tutorials

1. Neon Glow Button

A vibrant button with a glowing neon effect on hover.

Code Editor

<!DOCTYPE html>
                            <html lang="en">
                            <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Neon Glow Button</title>
                            <style>
                                .btn-neon {
                                    display: inline-block;
                                    padding: 12px 24px;
                                    background: #1e1e1e;
                                    color: #ffffff;
                                    text-decoration: none;
                                    border-radius: 8px;
                                    font-size: 1.1em;
                                    border: 2px solid #ff6f61;
                                    transition: box-shadow 0.3s ease;
                                }

                                    .btn-neon:hover {
                                        box-shadow: 0 0 20px #ff6f61, 0 0 40px #ff6f61;
                                    }
</style>
                                                                                   </head>
                                                                                   <!-- Google tag (gtag.js) -->
                            <script async src="https://www.googletagmanager.com/gtag/js?id=G-66WL7917LQ"></script>
                            <script>
                                window.dataLayer = window.dataLayer || [];
                                function gtag() { dataLayer.push(arguments); }
                                gtag('js', new Date());

                                gtag('config', 'G-66WL7917LQ');
</script>
                            <body style="background: #121212; padding: 20px;">
                            <a href="#" class="btn-neon">Neon Glow</a>
                                                                                   </body>
                                                                                   </html>

Download Code

Output

2. Slide-In Background Button

A button with a sliding background effect on hover.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Slide-In Button</title>
                            <style>
                                .btn-slide {
                                    display: inline-block;
                                    padding: 12px 24px;
                                    background: transparent;
                                    color: #ffffff;
                                    text-decoration: none;
                                    border-radius: 8px;
                                    font-size: 1.1em;
                                    position: relative;
                                    overflow: hidden;
                                    border: 2px solid #1e90ff;
                                }

                                    .btn-slide::before {
                                        content: '';
                                        position: absolute;
                                        top: 0;
                                        left: -100%;
                                        width: 100%;
                                        height: 100%;
                                        background: #1e90ff;
                                        transition: left 0.3s ease;
                                        z-index: -1;
                                    }

                                    .btn-slide:hover::before {
                                        left: 0;
                                    }
</style>
</head>
<body style="background: #121212; padding: 20px;">
                            <a href="#" class="btn-slide">Slide-In</a>
</body>
</html>

Download Code

Output

3. 3D Flip Button

A button that flips in 3D on hover.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>3D Flip Button</title>
                            <style>
                                .btn-flip {
                                    display: inline-block;
                                    padding: 12px 24px;
                                    background: #ffd700;
                                    color: #1e1e1e;
                                    text-decoration: none;
                                    border-radius: 8px;
                                    font-size: 1.1em;
                                    transform-style: preserve-3d;
                                    transition: transform 0.3s ease;
                                }

                                    .btn-flip:hover {
                                        transform: rotateX(360deg);
                                    }
</style>
</head>
<body style="background: #121212; padding: 20px;">
                            <a href="#" class="btn-flip">3D Flip</a>
</body>
</html>

Download Code

Output

4. Pulse Effect Button

A button with a pulsing animation on hover.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Pulse Button</title>
                            <style>
                                .btn-pulse {
                                    display: inline-block;
                                    padding: 12px 24px;
                                    background: #ff4500;
                                    color: #ffffff;
                                    text-decoration: none;
                                    border-radius: 8px;
                                    font-size: 1.1em;
                                    position: relative;
                                }

                                    .btn-pulse:hover::before {
                                        content: '';
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        width: 100%;
                                        height: 100%;
                                        background: rgba(255, 69, 0, 0.3);
                                        border-radius: 8px;
                                        transform: translate(-50%, -50%) scale(1);
                                        animation: pulse 1s infinite;
                                    }

                                @keyframes pulse {
                                    0% {
                                        transform: translate(-50%, -50%) scale(1);
                                        opacity: 1;
                                    }

                                    100% {
                                        transform: translate(-50%, -50%) scale(1.5);
                                        opacity: 0;
                                    }
                                }
</style>
</head>
<body style="background: #121212; padding: 20px;">
                            <a href="#" class="btn-pulse">Pulse</a>
</body>
</html>

Download Code

Output

5. Border Expand Button

A button with expanding borders on hover.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Border Expand Button</title>
                            <style>
                                .btn-expand {
                                    display: inline-block;
                                    padding: 12px 24px;
                                    background: transparent;
                                    color: #ffffff;
                                    text-decoration: none;
                                    border-radius: 8px;
                                    font-size: 1.1em;
                                    position: relative;
                                    border: none;
                                }

                                    .btn-expand::before, .btn-expand::after {
                                        content: '';
                                        position: absolute;
                                        background: #ffd700;
                                        transition: all 0.3s ease;
                                    }

                                    .btn-expand::before {
                                        top: 0;
                                        left: 0;
                                        width: 0;
                                        height: 2px;
                                    }

                                    .btn-expand::after {
                                        bottom: 0;
                                        right: 0;
                                        width: 0;
                                        height: 2px;
                                    }

                                    .btn-expand:hover::before, .btn-expand:hover::after {
                                        width: 100%;
                                    }
</style>
</head>
<body style="background: #121212; padding: 20px;">
                            <a href="#" class="btn-expand">Expand</a>
</body>
</html>

Download Code

Output

6. Gradient Fill Button

A button with a gradient fill effect on hover.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Gradient Fill Button</title>
                            <style>
                                .btn-gradient {
                                    display: inline-block;
                                    padding: 12px 24px;
                                    background: #1e1e1e;
                                    color: #ffffff;
                                    text-decoration: none;
                                    border-radius: 8px;
                                    font-size: 1.1em;
                                    transition: background 0.3s ease;
                                }

                                    .btn-gradient:hover {
                                        background: linear-gradient(135deg, #ff6f61, #ffd700);
                                    }
</style>
</head>
<body style="background: #121212; padding: 20px;">
                            <a href="#" class="btn-gradient">Gradient</a>
</body>
</html>

Download Code

Output

7. Ripple Effect Button

A button with a ripple animation on click.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Ripple Button</title>
                            <style>
                                .btn-ripple {
                                    display: inline-block;
                                    padding: 12px 24px;
                                    background: #1e90ff;
                                    color: #ffffff;
                                    text-decoration: none;
                                    border-radius: 8px;
                                    font-size: 1.1em;
                                    position: relative;
                                    overflow: hidden;
                                }

                                    .btn-ripple::after {
                                        content: '';
                                        position: absolute;
                                        background: rgba(255, 255, 255, 0.3);
                                        width: 0;
                                        height: 0;
                                        border-radius: 50%;
                                        transform: translate(-50%, -50%);
                                        animation: ripple 0.6s linear;
                                    }

                                @keyframes ripple {
                                    to {
                                        width: 200px;
                                        height: 200px;
                                        opacity: 0;
                                    }
                                }
</style>
</head>
<body style="background: #121212; padding: 20px;">
                            <a href="#" class="btn-ripple">Ripple</a>
</body>
</html>

Download Code

Output

8. Bounce Button

A button that bounces on hover.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Bounce Button</title>
                            <style>
                                .btn-bounce {
                                    display: inline-block;
                                    padding: 12px 24px;
                                    background: #ff6f61;
                                    color: #ffffff;
                                    text-decoration: none;
                                    border-radius: 8px;
                                    font-size: 1.1em;
                                    transition: transform 0.2s ease;
                                }

                                    .btn-bounce:hover {
                                        animation: bounce 0.4s;
                                    }

                                @keyframes bounce {
                                    0%, 100% {
                                        transform: translateY(0);
                                    }

                                    50% {
                                        transform: translateY(-10px);
                                    }
                                }
</style>
</head>
<body style="background: #121212; padding: 20px;">
                            <a href="#" class="btn-bounce">Bounce</a>
</body>
</html>

Download Code

Output

9. Color Swap Button

A button that swaps colors on hover.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Color Swap Button</title>
                            <style>
                                .btn-swap {
                                    display: inline-block;
                                    padding: 12px 24px;
                                    background: #ffd700;
                                    color: #1e1e1e;
                                    text-decoration: none;
                                    border-radius: 8px;
                                    font-size: 1.1em;
                                    transition: background 0.3s ease, color 0.3s ease;
                                }

                                    .btn-swap:hover {
                                        background: #1e1e1e;
                                        color: #ffd700;
                                    }
</style>
</head>
<body style="background: #121212; padding: 20px;">
                            <a href="#" class="btn-swap">Color Swap</a>
</body>
</html>

Download Code

Output

10. Icon Slide Button

A button with a sliding icon on hover.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Icon Slide Button</title>
                            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
                            <style>
                                .btn-icon {
                                    display: inline-flex;
                                    align-items: center;
                                    padding: 12px 24px;
                                    background: #1e90ff;
                                    color: #ffffff;
                                    text-decoration: none;
                                    border-radius: 8px;
                                    font-size: 1.1em;
                                    position: relative;
                                    overflow: hidden;
                                }

                                    .btn-icon i {
                                        margin-left: 10px;
                                        transform: translateX(-20px);
                                        opacity: 0;
                                        transition: transform 0.3s ease, opacity 0.3s ease;
                                    }

                                    .btn-icon:hover i {
                                        transform: translateX(0);
                                        opacity: 1;
                                    }
</style>
</head>
<body style="background: #121212; padding: 20px;">
                            <a href="#" class="btn-icon">Icon Slide <i class="fas fa-arrow-right"></i></a>
</body>
</html>

Download Code

Output