CodeBlanks Logo Icon CodeBlanks
Login Register
Animation

Animation Buttons

Six ready-made CSS button styles in one set: glow, gradient swipe, 3D press, ripple, outline fill and pulse.

Admin
22 April 2026
348 görüntülenme
View Source Fullscreen
HTML 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <div class="button-container">
            <button class="button-glow">Glow Effect</button>
        </div>
        <div class="button-container">
            <button class="button-gradient">Gradient Swipe</button>
        </div>
        <div class="button-container">
            <button class="button-3d">3D Effect</button>
        </div>
        <div class="button-container">
            <button class="button-ripple">Ripple Effect</button>
        </div>
        <div class="button-container">
            <button class="button-outline">Outline Hover</button>
        </div>
        <div class="button-container">
            <button class="button-pulse">Pulse Animation</button>
        </div>
    </body>
</html>
CSS 
body {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
                margin: 0;
                background: linear-gradient(120deg, #1a73e8, #34a853);
                font-family: Arial, sans-serif;
                color: #fff;
            }

            .button-container {
                margin: 10px 0;
            }

            button {
                padding: 15px 30px;
                font-size: 18px;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            /* Buton 1 - Glow Effect */
            .button-glow {
                background: linear-gradient(45deg, #ff6a00, #ee0979);
                color: white;
                box-shadow: 0 0 20px rgba(255, 106, 0, 0.7);
            }

            .button-glow:hover {
                box-shadow: 0 0 40px rgba(255, 106, 0, 0.9);
                transform: scale(1.1);
            }

            /* Buton 2 - Gradient Swipe */
            .button-gradient {
                background: linear-gradient(45deg, #11998e, #38ef7d);
                color: white;
                position: relative;
                overflow: hidden;
            }

            .button-gradient::before {
                content: "";
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.2);
                transition: left 0.4s ease;
            }

            .button-gradient:hover::before {
                left: 100%;
            }

            /* Buton 3 - 3D Effect */
            .button-3d {
                background: linear-gradient(45deg, #1e3c72, #2a5298);
                color: white;
                box-shadow:
                    0 4px 0 #142850,
                    0 6px 10px rgba(0, 0, 0, 0.3);
            }

            .button-3d:hover {
                transform: translateY(-2px);
                box-shadow:
                    0 6px 0 #142850,
                    0 8px 15px rgba(0, 0, 0, 0.3);
            }

            /* Buton 4 - Ripple Effect */
            .button-ripple {
                background: #ff4b2b;
                color: white;
                position: relative;
                overflow: hidden;
            }

            .button-ripple::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.2);
                top: 0;
                left: -100%;
                transition: left 0.3s ease;
            }

            .button-ripple:hover::after {
                left: 0;
            }

            /* Buton 5 - Outline Hover */
            .button-outline {
                background: transparent;
                color: white;
                border: 2px solid white;
            }

            .button-outline:hover {
                background: white;
                color: #333;
            }

            /* Buton 6 - Pulse Animation */
            .button-pulse {
                background: linear-gradient(45deg, #ff416c, #ff4b2b);
                color: white;
                position: relative;
            }

            .button-pulse::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                border: 4px solid rgba(255, 255, 255, 0.5);
                top: 0;
                left: 0;
                border-radius: 8px;
                opacity: 0;
                animation: pulse 1.5s infinite;
            }

            @keyframes pulse {
                0% {
                    transform: scale(1);
                    opacity: 0.8;
                }
                100% {
                    transform: scale(1.4);
                    opacity: 0;
                }
            }

About this snippet

A small library of six hover and animation styles you can drop onto any button. Every style lives in its own class, so you can copy just the one you need without pulling in the rest.

Included styles

  • Glow Effect (.button-glow): an orange-pink gradient with a coloured box-shadow that grows into a stronger glow on hover.
  • Gradient Swipe (.button-gradient): a green gradient with a translucent ::before layer that sweeps from left to right on hover.
  • 3D Effect (.button-3d): a solid dark-blue bottom shadow makes the button look raised; on hover it lifts 2 px and the shadow deepens.
  • Ripple Effect (.button-ripple): a light ::after layer slides in from the left and covers the button on hover.
  • Outline Hover (.button-outline): a transparent button with a border that fills with colour on hover.
  • Pulse Animation (.button-pulse): a white ring around the button grows and fades every 1.5 s with the pulse keyframes, drawing attention without any user action.

How to use it

  1. Copy the shared button rule (padding, radius and the transition: all 0.3s ease) once.
  2. Copy the block for the style you want, for example .button-glow and .button-glow:hover.
  3. Add the class to your button: <button class="button-glow">Sign up</button>.
  4. Edit the gradient and shadow colours to fit your theme.

Which one to choose?

Use Glow or Pulse for a single primary action such as "Sign up", Outline for secondary actions, and 3D for playful interfaces. Avoid more than one animated button in the same view so the main action stays clear.

Comments 0

No comments yet. Be the first to comment.