SnippetUI
← Back to snippets

Shimmer Button

A beautiful button component that emits a band of light (shimmer effect) on hover and periodically.

HTMLCSSTailwind CSSReact

It is a beautiful button component that attracts the eye with a band of light (shimmer effect) that flows on hover and periodically. Ideal for CTA (Call To Action) where you want to grab the user’s attention.

Preview

Use Cases & Features

  • Improve conversion rates: The visual movement makes it easy to catch users’ attention, making it perfect for important calls to action (CTA) like sign-up and purchase buttons.

  • Small Animation: Gives a sophisticated impression with a regular periodic shimmer (light reflection) effect that is not too flashy.

  • Microinteractions: The button will be raised slightly on hover and a shadow will be added to emphasize that it is a clickable element.

Key points of design and UX (Design & UX)

  • Contrast and Visibility: The effect is emphasized by running bright bands of light against a dark background.

  • Performance: Animation that utilizes transform and opacity minimizes the drawing load on the browser and achieves smooth movement.

  • Accessibility: The focus ring (focus:ring) has been set appropriately so that the status can be visually communicated even with keyboard operations.

How to customize (Customization Guide)

  • Change color: You can customize the color of the light by changing rgba(255, 255, 255, 0.2) to your brand color (e.g. rgba(59, 130, 246, 0.3)).

  • Animation speed adjustment: Setting 3s of animation: shimmer-effect 3s infinite; to 2s will make it move faster, and setting 5s will make it move slower.

  • Implementation only with Tailwind: By adding keyframes to tailwind.config.js, it is possible to complete the implementation with only Tailwind’s utility classes without using custom classes.

Implementation code (Implementation)

HTML & CSS (Tailwind CSS併用)

<button class="shimmer-btn text-slate-200 bg-slate-900 border border-slate-700/50 px-8 py-3 rounded-full font-medium transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-slate-500/20 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-950">

<span class="relative z-10 flex items-center gap-2">

  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

    <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />

  </svg>

  Get Started

</span>

</button>



<style>
.shimmer-btn {

  position: relative;

  overflow: hidden;

}



.shimmer-btn::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 50%;

  height: 100%;

  background: linear-gradient(

    90deg,

    transparent,

    rgba(255, 255, 255, 0.2),

    transparent

  );

  transform: skewX(-20deg);

  animation: shimmer 3s infinite;

}



@keyframes shimmer {

  0% { left: -100%; }

  20% { left: 200%; }

  100% { left: 200%; }

}
</style>

React (Tailwind Configuration)

This is an approach that can be completed within a React component by extending the Tailwind configuration file (tailwind.config.js).