Gradient Flow on Hover
An animated gradient that flows across a button's border and background when the user hovers. Great for CTAs, navigation items, or any interactive element that benefits from a colorful hover state.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
gradienthoverbuttonflowanimated
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
An animated gradient that flows across a button's border and background on hover.
CSS
css
.btn { padding: 14px 28px; border: none; border-radius: 10px; background: #18181b; color: #fff; font-weight: 600; cursor: pointer; position: relative; overflow: hidden; }
.btn::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(90deg, #3b82f6, #22d3ee, #38bdf8, #3b82f6); background-size: 300% 300%; border-radius: 12px; z-index: -1; animation: flow 3s ease infinite; opacity: 0; transition: opacity 0.3s; }
.btn:hover::before { opacity: 1; }
.btn span { position: relative; z-index: 1; }
@keyframes flow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<button class="btn"><span>Hover me</span></button>Full Source
html
<!DOCTYPE html>
<html><head><style>
.btn { padding: 14px 28px; border: none; border-radius: 10px; background: #18181b; color: #fff; font-weight: 600; cursor: pointer; position: relative; overflow: hidden; }
.btn::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(90deg, #3b82f6, #22d3ee, #38bdf8, #3b82f6); background-size: 300% 300%; border-radius: 12px; z-index: -1; animation: flow 3s ease infinite; opacity: 0; transition: opacity 0.3s; }
.btn:hover::before { opacity: 1; }
.btn span { position: relative; z-index: 1; }
@keyframes flow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body><button class="btn"><span>Hover me</span></button></body></html>