CodeBlanks Logo Icon CodeBlanks
Login Register
Animation

Animated Gradient Button

A square button whose four-colour gradient background drifts endlessly, with a soft glow on hover. Pure CSS keyframe animation.

Admin
20 April 2026
255 görüntülenme
View Source Fullscreen
HTML 
<html>
    <head>
        <title>Animated bg Button</title>
    </head>
    <body>
        <button class="animated-bg">CODE BLANKS</button>
    </body>
</html>
CSS 
body {
    display: flex;
    justify-content: center;
    align-items: center;
}
.animated-bg {
    width: 200px;
    height: 200px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    position: fixed;
    color: #d3d3d3;
    font-size: 20px;
    border: 1px solid;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px;
    background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}
.animated-bg:hover {
    color: white;
    box-shadow: 0px 2px 7px 0px #00b0ff96;
}
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

About this snippet

A living background in a single class: the button is filled with a four-stop gradient (coral, pink, blue and teal) that slowly flows from one side to the other and back again. On hover the text brightens to white and a cool blue glow appears around the edge.

How it works

  • The background is a linear-gradient(45deg, …) with four colours, stretched with background-size: 400% 400% so only part of it is visible at once.
  • The gradientBG keyframes move background-position from 0% 50% to 100% 50% and back, which makes the colours appear to drift.
  • animation: gradientBG 15s ease infinite runs the loop forever at a calm pace.
  • The hover state only changes the text colour and adds a box-shadow, so it never interrupts the animation.

How to use it

  1. Copy the .animated-bg rule and the @keyframes gradientBG block.
  2. Remove position: fixed and the fixed width/height if you want a normal inline button.
  3. Swap the four colours for your own palette; three to five colours give the smoothest flow.
  4. Shorten 15s for a more energetic effect or lengthen it for a calmer one.

Tips

The same technique works for hero sections, cards and badges. Wrap the animation in @media (prefers-reduced-motion: no-preference) to respect visitors who prefer less motion.

Comments 0

No comments yet. Be the first to comment.