Buttons · community component

Shimmer Ripple CTA Button

Botón de llamada a la acción con haz de luz resplandeciente dinámico.

CSSMIT licenseUpdated today

◉ 100 views

Live 1 line⌘Z Undo

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="shimmer-btn"><span>EXPLORE NOW</span></button>

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="shimmer-btn"><span>EXPLORE NOW</span></button>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.shimmer-btn { position: relative; padding: 12px 28px; background: #2563eb; color: #fff; font-family: system-ui; font-weight: 700; font-size: 12px; border: none; border-radius: 8px; overflow: hidden; cursor: pointer; box-shadow: 0 4px 14px rgba(37,99,235,0.4); }
.shimmer-btn::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(60deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%); animation: shimmerMove 2.5s infinite; }
@keyframes shimmerMove { 0% { transform: translate(-100%, -100%); } 100% { transform: translate(100%, 100%); } }

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.shimmer-btn { position: relative; padding: 12px 28px; background: #2563eb; color: #fff; font-family: system-ui; font-weight: 700; font-size: 12px; border: none; border-radius: 8px; overflow: hidden; cursor: pointer; box-shadow: 0 4px 14px rgba(37,99,235,0.4); }
.shimmer-btn::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(60deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%); animation: shimmerMove 2.5s infinite; }
@keyframes shimmerMove { 0% { transform: translate(-100%, -100%); } 100% { transform: translate(100%, 100%); } }

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryButtons

AccessibilityKeyboard ready

Explore similar parts →

Created by

codepeek

@codepeek

Open-source licenseMIT

Use, copy, modify, publish, distribute and sell this UI element in personal or commercial work.

Keep the original copyright and MIT notice in substantial copies. Provided “as is”, without warranty.

Read the MIT license

Used tags

#buttons #css #interface #opensource #codepeek

Community

Comments 0

One main comment per member. Conversations can have unlimited replies.