Shimmer Button

A button with a shimmering animated effect.

API

Prop NameTypeDefaultDescription
classstring""Additional CSS classes to apply to the button.
shimmerColorstring"#ffffff"Color of the shimmer effect.
shimmerSizestring"0.05em"Size of the shimmer effect.
borderRadiusstring"100px"Border radius of the button.
shimmerDurationstring"3s"Duration of the shimmer animation.
backgroundstring"rgba(0, 0, 0, 1)"Background color of the button. Can be rgb or hex code.

Component Code

You can copy and paste the following code to create this component:

ShimmerButton.vue

Features

  • Shimmering Effect: Displays a continuous shimmering animation on the button.
  • Customizable Appearance: Adjust shimmer color, size, duration, border radius, and background color.
  • Slot Support: Easily add any content inside the button using the default slot.
  • Interactive States: Includes hover and active states for enhanced user interaction.
  • Responsive Design: Adapts to different screen sizes and resolutions seamlessly.

Credits