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; }

Back to Snippets

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; }

Pure CSS Shimmer Button Hover Effect

Share Code Snippet