Shimmer Button
A call-to-action button wrapped in an animated conic gradient shimmer with a highlight sweep. Ideal for primary actions, pricing CTAs, or any button that needs to stand out and draw the user's eye.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
buttonshimmergradientconichover
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A call-to-action button with an animated conic gradient shimmer that draws attention on hover.
CSS
css
:root {
--spread: 90deg;
--shimmer-color: #ffffff;
--radius: 100px;
--speed: 3s;
--cut: 0.05em;
--bg: #0a0a0a;
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0a0a0a; }
.btn {
position: relative;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 12px 24px;
color: white;
background: var(--bg);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius);
font-family: system-ui, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: transform 0.3s ease;
}
.btn:active { transform: translateY(1px); }
.btn .spark-wrap {
position: absolute;
inset: 0;
z-index: -30;
overflow: visible;
filter: blur(2px);
}
.btn .spark {
position: absolute;
inset: 0;
aspect-ratio: 1;
animation: shimmer-slide var(--speed) linear infinite;
}
.btn .spark::before {
content: "";
position: absolute;
inset: -100%;
background: conic-gradient(from calc(270deg - (var(--spread) * 0.5)), transparent 0, var(--shimmer-color) var(--spread), transparent var(--spread));
animation: spin-around var(--speed) linear infinite;
}
.btn .highlight {
position: absolute;
inset: 0;
border-radius: var(--radius);
box-shadow: inset 0 -8px 10px rgba(255,255,255,0.12);
transition: box-shadow 0.3s ease;
pointer-events: none;
}
.btn:hover .highlight { box-shadow: inset 0 -6px 10px rgba(255,255,255,0.25); }
.btn:active .highlight { box-shadow: inset 0 -10px 10px rgba(255,255,255,0.25); }
.btn .backdrop {
position: absolute;
inset: var(--cut);
z-index: -20;
background: var(--bg);
border-radius: var(--radius);
}
@keyframes shimmer-slide { to { transform: translateX(100%); } }
@keyframes spin-around { to { transform: rotate(360deg); } }HTML
html
<button type="button" class="btn">
<div class="spark-wrap"><div class="spark"></div></div>
<div class="highlight"></div>
<div class="backdrop"></div>
</button>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--spread: 90deg;
--shimmer-color: #ffffff;
--radius: 100px;
--speed: 3s;
--cut: 0.05em;
--bg: #0a0a0a;
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0a0a0a; }
.btn {
position: relative;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 12px 24px;
color: white;
background: var(--bg);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius);
font-family: system-ui, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: transform 0.3s ease;
}
.btn:active { transform: translateY(1px); }
.btn .spark-wrap {
position: absolute;
inset: 0;
z-index: -30;
overflow: visible;
filter: blur(2px);
}
.btn .spark {
position: absolute;
inset: 0;
aspect-ratio: 1;
animation: shimmer-slide var(--speed) linear infinite;
}
.btn .spark::before {
content: "";
position: absolute;
inset: -100%;
background: conic-gradient(from calc(270deg - (var(--spread) * 0.5)), transparent 0, var(--shimmer-color) var(--spread), transparent var(--spread));
animation: spin-around var(--speed) linear infinite;
}
.btn .highlight {
position: absolute;
inset: 0;
border-radius: var(--radius);
box-shadow: inset 0 -8px 10px rgba(255,255,255,0.12);
transition: box-shadow 0.3s ease;
pointer-events: none;
}
.btn:hover .highlight { box-shadow: inset 0 -6px 10px rgba(255,255,255,0.25); }
.btn:active .highlight { box-shadow: inset 0 -10px 10px rgba(255,255,255,0.25); }
.btn .backdrop {
position: absolute;
inset: var(--cut);
z-index: -20;
background: var(--bg);
border-radius: var(--radius);
}
@keyframes shimmer-slide { to { transform: translateX(100%); } }
@keyframes spin-around { to { transform: rotate(360deg); } }
</style>
</head>
<body>
<button type="button" class="btn">
<div class="spark-wrap"><div class="spark"></div></div>
<div class="highlight"></div>
<div class="backdrop"></div>
</button>
</body>
</html>