BUTTONS

Sliding Background Button

A modern button with a smooth background layer that slides across on hover. Copy the code and use it in your own project.

HTML
<button class="slide-bg-btn" type="button">
  <span>Hover Me</span>
</button>
CSS
.slide-bg-btn{
  position:relative;
  padding:15px 34px;
  border:1px solid #22d3ee;
  border-radius:10px;
  background:transparent;
  color:#22d3ee;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  overflow:hidden;
  transition:
    color .3s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.slide-bg-btn span{
  position:relative;
  z-index:2;
}

.slide-bg-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(
    90deg,
    #22d3ee,
    #8b5cf6
  );
  transition:left .35s ease;
}

.slide-bg-btn:hover::before{
  left:0;
}

.slide-bg-btn:hover{
  color:#ffffff;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(34,211,238,.20);

.slide-bg-btn:focus-visible{
  outline:2px solid #22d3ee;
  outline-offset:4px;
}
}

How This Sliding Background Button Works

The Sliding Background Button uses a CSS hover effect to move a gradient layer across the button from left to right. Its HTML contains a standard button element with a span around the “Hover Me” text. The slide-bg-btn class applies the button styling, while the span keeps the text positioned above the animated background layer.

The button starts with a transparent background, a cyan #22d3ee border, and matching cyan text. The overflow: hidden property keeps the animated layer inside the button’s rounded edges, while position: relative provides the positioning reference for the ::before pseudo-element.

The sliding effect is created with the ::before pseudo-element. It has the same width and height as the button but starts at left: -100%, which keeps the cyan-to-purple gradient outside the visible area. On hover, left changes to 0, moving the gradient smoothly across the button in .35s.

When the button is hovered, the text changes to white, the entire button moves upward by 2px using translateY(-2px), and a soft cyan shadow appears underneath. These small changes work together with the sliding gradient to make the hover state feel more responsive without making the animation too strong.

No JavaScript is required for the animation itself. The hover movement, gradient slide, text color change, lift, and shadow are all handled with CSS. The :focus-visible style also adds a clear outline when the button is reached with a keyboard, making the component easier to navigate without affecting its normal hover appearance.

Customizing This Sliding Background Button

You can customize the Sliding Background Button by changing a few CSS values to better match your website or project. The gradient colors, animation speed, button shape, spacing, and hover shadow can all be adjusted without changing the HTML structure.

  • Gradient colors: Change #22d3ee and #8b5cf6 inside linear-gradient() to match your website’s color palette.
  • Slide speed: Adjust .35s in the ::before transition to make the background animation faster or slower.
  • Button size: Modify padding: 15px 34px to create a smaller or larger button.
  • Corner radius: Change border-radius: 10px for sharper corners or a more rounded appearance.
  • Hover lift: Adjust translateY(-2px) if you want more or less upward movement.
  • Hover shadow: Modify the box-shadow values to control the strength and spread of the cyan glow.

Where to Use This Sliding Background Button

The Sliding Background Button works well in interfaces where you want an important action to stand out with a smooth but lightweight hover effect. Its clean design makes it suitable for both simple websites and modern UI layouts.

  • Call-to-action buttons: Use it for actions such as “Get Started,” “Learn More,” or “View Project.”
  • Portfolio websites: Add it to project cards, case studies, or contact sections.
  • Landing pages: Use the sliding effect to draw attention to an important conversion button.
  • Pricing sections: Apply it to plan selection or signup buttons.
  • Product pages: Use it for product details, demos, or other important actions.
  • Developer projects: A good fit for dashboards, UI demos, and modern web interfaces.

Because the effect is built entirely with HTML and CSS, the button is easy to reuse without adding an extra JavaScript dependency. You can change the button text and styling while keeping the same sliding background behavior.

If you want to try another interactive button style, check out the Icon Arrow Button, which combines a directional arrow with a smooth hover animation.

Frequently Asked Questions

Does the Sliding Background Button require JavaScript?
No. The sliding background animation is created entirely with CSS using the ::before pseudo-element, hover styles, and transitions. JavaScript is not required for the visual effect.

How does the background slide across the button?
The effect uses the ::before pseudo-element, which starts at left: -100%. When the button is hovered, its position changes to left: 0, moving the gradient smoothly from left to right.

Can I change the gradient colors?
Yes. Change the #22d3ee and #8b5cf6 values inside linear-gradient() to any colors that match your website or project design.

Can I change the speed of the sliding animation?
Yes. Change the .35s value in the ::before transition. A smaller value makes the gradient slide faster, while a larger value creates a slower transition.

The Sliding Background Button is a simple way to add movement and visual feedback without relying on JavaScript. With a few CSS changes, you can adjust the gradient, speed, size, and hover behavior to fit different website designs while keeping the component lightweight and reusable.

Scroll to Top