CodeBlanks Logo Icon CodeBlanks
Login Register
Animation

Animated Button

A gradient call-to-action button with a diagonal light sweep and a smooth scale-up on hover. Pure CSS, no JavaScript.

Admin
20 April 2026
276 görüntülenme
Fullscreen
HTML 
<html>
    <head>
        <title>Animated bg Button</title>
    </head>
    <body>
        <div class="button-container">
            <button class="animated-button">Hadi Başlayalım</button>
        </div>
    </body>
</html>
CSS 
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    font-family: Arial, sans-serif;
}

.button-container {
    text-align: center;
}

.animated-button {
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: linear-gradient(45deg, #ff416c, #ff4b2b);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.animated-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transform: skewX(-45deg);
    transition: left 0.5s ease;
}

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

.animated-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

About this snippet

This snippet turns a plain <button> into an eye-catching call to action. The button sits on a pink-to-orange gradient, and when the cursor moves over it a translucent band of light slides across the surface while the button grows slightly and casts a deeper shadow.

How it works

  • The light band is a ::before pseudo-element, skewed with skewX(-45deg) and parked outside the button at left: -100%.
  • overflow: hidden on the button clips the band, so it is only visible while it travels across.
  • On :hover the band moves to left: 100%; the transition on left turns that jump into a 0.5 s sweep.
  • The same hover state applies transform: scale(1.1) and a larger box-shadow for a subtle lift.

How to use it

  1. Copy the HTML and CSS into your page; the body rules only centre the demo and can be removed.
  2. Add the animated-button class to any button or link.
  3. Change the two colours in linear-gradient(45deg, #ff416c, #ff4b2b) to match your brand.
  4. Adjust the sweep speed with the 0.5s value in the ::before transition.

Tips

Keep the scale factor between 1.03 and 1.1 so the layout around the button does not jump. For keyboard users, add the same styles to :focus-visible so the effect also appears when the button is reached with the Tab key.

Comments 0

No comments yet. Be the first to comment.