stripe hover overlay button card Tailwind CTA buttons with more graphic hover treatment editorial callout cards or promo tiles featured links that need a stronger visual pass on hover flat hover overlays feel too bland need a more graphic interaction without images or JS want a stripe-based reveal that works on both buttons and cards
Stripe Reveal
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/stripe-reveal.json
Stripe reveal
Graphic hover layer
A graphic sweep for highlighted surfaces.
Background
Customize
Quick Start
<button class="stripe-reveal relative rounded-full border border-white/10 px-5 py-3 font-semibold text-white">Upgrade</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 949 bytes · 40 lines
- Custom Properties
-
--stripe-color--stripe-width--stripe-gap--stripe-angle--stripe-duration - Classes
-
.stripe-reveal
stripe hover overlay button card
A graphic hover layer inspired by striped editorial treatments. It works well in Tailwind projects where you want more visual energy on a button or card without turning the whole component into a heavy animation demo.
CTA button
<button class="stripe-reveal relative rounded-full border border-white/10 bg-slate-950 px-5 py-3 font-semibold text-white">
Upgrade Plan
</button>Promotional surface
<article
class="stripe-reveal relative overflow-hidden rounded-3xl border border-slate-200 bg-white p-6"
style="--stripe-color: oklch(0.78 0.16 30 / 0.22); --stripe-angle: 105deg"
>
<h3 class="text-xl font-semibold text-slate-900">Editorial promo card</h3>
<p class="mt-2 text-sm leading-6 text-slate-600">Use it for highlighted links, release cards, or category promos.</p>
</article>