Pure CSS Shimmer Button Hover Effect

Add an elegant shimmer or sweep effect to your buttons on hover using only pure CSS. This modern snippet enhances user interaction by creating a subtle light animation across the button face. Easy to implement and customize for any button design.

#css

#button

#shimmer effect

#hover effect

#pure css

#animation

#modern design

#ui element

#interactive button

#light sweep

/HTML *CSS ()JS Output Live Updates

body, html {
    background-color: #f0f4f8;
}

/* ==== Global Showcase Styles ==== */
.shimmer-showcase-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 30px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

/* ==== Shimmer Button Styles ==== */
.shimmer-button {
  position: relative; /* Crucial for pseudo-element positioning */
  display: inline-block;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 500;
  color: white;
  background-color: #007bff; /* Default blue, overridden by color classes */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden; /* Essential to clip the shimmer effect */
  text-decoration: none; /* For <a> tags styled as buttons */
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  z-index: 1; /* Ensure button content is above default pseudo-element stacking */
}

.shimmer-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* Start off-screen to the left */
  width: 75%; /* Width of the shimmer itself */
  height: 100%;
  background: linear-gradient(
    100deg, /* Angle of the shimmer */
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  transform: skewX(-25deg); /* Angle the shimmer shape */
  transition: left 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth, custom timing */
  z-index: -1; /* Place shimmer behind button text but above background */
}

.shimmer-button:hover,
.shimmer-button:focus-visible {
  /* Optional: slightly darken or change button on hover/focus */
  /* e.g., filter: brightness(0.95); */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  outline: none;
}

.shimmer-button:hover::before,
.shimmer-button:focus-visible::before {
  left: 125%; /* Move shimmer across and off-screen to the right */
}

.shimmer-button:active {
    transform: scale(0.98);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ==== Color Variations for .shimmer-button ==== */
.sb-blue { background-color: #007bff; }
.sb-green { background-color: #28a745; }
.sb-red { background-color: #dc3545; }
.sb-orange { background-color: #fd7e14; }
.sb-grey { background-color: #6c757d; }

/* Focus states for accessibility (can match hover or be distinct) */
.shimmer-button.sb-blue:focus-visible { outline: 2px solid #80bdff; outline-offset: 2px; }
.shimmer-button.sb-green:focus-visible { outline: 2px solid #79d47c; outline-offset: 2px; }
.shimmer-button.sb-red:focus-visible { outline: 2px solid #ea868f; outline-offset: 2px; }
.shimmer-button.sb-orange:focus-visible { outline: 2px solid #fec38f; outline-offset: 2px; }
.shimmer-button.sb-grey:focus-visible { outline: 2px solid #adb5bd; outline-offset: 2px; }