BUTTONS

Shine Shimmer Button

A stylish button with a smooth light sweep animation that creates a clean shimmer effect on hover. Copy the code and use it in your own project.

HTML
<button class="shimmer-btn" type="button">
  <span>Hover Me</span>
</button>
CSS
.shimmer-btn{
  position:relative;
  padding:15px 34px;
  border:0;
  border-radius:10px;
  background:#8b5cf6;
  color:#ffffff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  overflow:hidden;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.shimmer-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:55%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.55),
    transparent
  );
  transform:skewX(-20deg);
  transition:left .6s ease;
}

.shimmer-btn:hover::before{
  left:140%;
}

.shimmer-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(139,92,246,.35);
}

How This Shine Shimmer Button Works

The Shine Shimmer Button creates its light sweep effect entirely with CSS, so no JavaScript is needed for the animation itself. The HTML uses a standard button with a span around the “Hover Me” text, while the shimmer-btn class controls the button’s appearance and hover behavior.

The button starts with a purple #8b5cf6 background, white text, and rounded corners. Its position: relative and overflow: hidden properties create a controlled area for the shimmer animation, keeping the moving light effect inside the button’s edges.

The shimmer itself is created with the ::before pseudo-element. It starts at left: -120% and uses a semi-transparent white gradient with skewX(-20deg) to create the angled light streak. This keeps the effect hidden outside the button until the user hovers over it. You can learn more about this technique in the MDN Web Docs guide to ::before.

On hover, the ::before layer moves from left: -120% to left: 140% over .6s, carrying the angled light streak across the entire button. This creates the smooth shine effect without changing the button’s main background color.

At the same time, the button moves upward by 2px and gains a stronger purple shadow. These subtle changes add depth to the hover state while keeping the shimmer as the main visual effect.

Customizing This Shine Shimmer Button

You can customize the Shine Shimmer Button by adjusting a few CSS values while keeping the same HTML structure. The button color, shimmer brightness, sweep speed, size, corner radius, and hover shadow can all be changed to better match your website or interface design.

  • Button color: Change #8b5cf6 in the .shimmer-btn background to match your website’s color palette.
  • Shimmer brightness: Adjust rgba(255,255,255,.55) to make the light sweep softer or brighter.
  • Sweep speed: Change .6s in the ::before transition to make the shimmer move faster or slower.
  • Shimmer width: Adjust width: 55% to create a narrower or wider light streak.
  • Button size: Modify padding: 15px 34px to make the button smaller or larger.
  • Hover effect: Change translateY(-2px) or the box-shadow values to control the lift and glow strength

Where to Use This Shine Shimmer Button

The Shine Shimmer Button works well in places where you want an important action to attract attention without using a complex animation. Its quick light sweep adds visual feedback while keeping the button clean and easy to understand.

  • Call-to-action buttons: Use it for actions such as “Get Started,” “Explore,” or “Learn More.”
  • Landing pages: Add it to important buttons that need a little extra visual attention.
  • Portfolio websites: Use it for project links, contact actions, or featured work.
  • Product pages: Apply the effect to product details, demos, or other key actions.
  • Pricing sections: Use it for plan selection or signup buttons.
  • Modern UI projects: A good fit for dashboards, web apps, and interactive interface designs.

Because the shimmer effect is created entirely with CSS, the button stays lightweight and easy to reuse. You can change the text, colors, size, and animation timing without adding any JavaScript for the visual effect.

If you want to explore another CSS-only button effect, check out the Sliding Background Button, which uses a gradient layer that moves smoothly across the button on hover.

Frequently Asked Questions

Does the Shine Shimmer Button require JavaScript?
No. The shimmer animation is created entirely with CSS using the ::before pseudo-element, transitions, and hover styles. JavaScript is only used for the CodeRipple copy buttons, not for the shimmer effect itself.

How does the shimmer effect move across the button?
The ::before pseudo-element starts outside the left side of the button at left: -120%. On hover, it moves to left: 140%, carrying the angled light gradient smoothly across the button.

Can I change the brightness of the shimmer effect?
Yes. Adjust the rgba(255,255,255,.55) value in the gradient. Lower opacity creates a softer shimmer, while higher opacity makes the light sweep more noticeable.

Can I change the speed of the shimmer animation?
Yes. Change the .6s value in the ::before transition. A smaller value makes the light sweep faster, while a larger value creates a slower shimmer effect.

The Shine Shimmer Button adds a polished hover interaction without requiring JavaScript for the animation. Its CSS-based light sweep, subtle lift, and soft shadow make it easy to customize and reuse across different websites while keeping the component simple and lightweight.

Scroll to Top