Blog08 Nov 2026

CSS button effects: 14 animations to try and copy

Tired of a simple colour change on hover? CSS can do so much more! Launch rockets, pop up hearts and fan out colourful shadows. Explore 14 creative button effects in pink, mint and lilac, with live previews and complete HTML and CSS snippets to try and copy.

Pastel three-dimensional buttons with a mouse pointer and motion accents in pink and mint

Diesen Beitrag auf Deutsch lesen

Try the effects before copying the code

Move your pointer over a button to play its effect: 3D layers, floating hearts, neon light, a flipping face or a new message. Click the button to open its explanation and complete code. On touchscreens, press a button to try it and open its details.

“Copy effect” copies a complete HTML and CSS example, including the source comment anitamostofa.com. Open “How it works & code” to read or manually select the snippet. The previews use the exact same CSS as the copied examples.

01

Fanning colour shadows

LIGHT / SHADOW

Hover to play · Click for details

All three shapes begin aligned. On hover the mint face lifts and its pink and violet colour shadows fan out behind it, like light cast by two offset spotlights.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-lift" aria-label="Lift off"><span class="am-label">Lift off</span></button>
</span>

<style>
/* Quelle / Source: anitamostofa.com — CSS Button Lab */
.am-trigger { display: inline-grid; place-items: center; padding: 24px; max-width: 100%; box-sizing: border-box; }
.am-fx.am-fx {
  --ink: #181818; --pink: #FE7DDA; --mint: #85E8B9;
  --ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem; min-height: 64px; max-width: 100%; box-sizing: border-box;
  padding: 1rem 2rem; margin: 0; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform 280ms var(--ease);
}

.am-fx:focus-visible { outline: 3px solid #7287ff; outline-offset: 8px; }
.am-fx > span { position: relative; z-index: 1; }

/* 3D layers: pulled apart */
.am-fx.am-lift { padding: 0; border: 0; border-radius: 18px; background: transparent; transform: translateY(0); transition: transform 360ms var(--ease); }
.am-lift .am-label { display: flex; align-items: center; justify-content: center; min-height: 64px; box-sizing: border-box; padding: 1rem 2rem; border: 2px solid var(--ink); border-radius: inherit; background: var(--mint); transition: transform 360ms var(--ease); }
/* Identical silhouettes start directly underneath the opaque main face. */
.am-lift::before, .am-lift::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transform: translate(0,0) rotate(0); opacity: .8; transition: transform 360ms var(--ease); }
.am-lift::before { background: var(--pink); z-index: -1; }
.am-lift::after { background: #7287ff; z-index: -2; }
@media (prefers-reduced-motion: no-preference) {
:is(.am-fx.am-lift:hover, .am-trigger:hover .am-fx.am-lift) { transform: translateY(-6px); }
:is(.am-lift:hover, .am-trigger:hover .am-lift) .am-label { transform: rotate(-3deg); }
:is(.am-lift:hover, .am-trigger:hover .am-lift)::before { transform: translate(-20px,20px) rotate(-6deg); }
:is(.am-lift:hover, .am-trigger:hover .am-lift)::after { transform: translate(22px,38px) rotate(6deg); }
.am-lift:active .am-label { transform: translateY(3px) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
.am-fx.am-lift, .am-lift .am-label, .am-lift::before, .am-lift::after { transform: none !important; transition: none !important; }
}
</style>

02

Circle rolls to the right

ROTATE / ARROW

Hover to play · Click for details

The black circle starts on the left. On hover it rolls across the filled button to the right as the label slides left.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-arrow" aria-label="Think ahead"><span class="am-label">Think ahead</span><span class="am-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28" focusable="false"><path d="M4 12H20M14 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span></button>
</span>

<style>
/* Quelle / Source: anitamostofa.com — CSS Button Lab */
.am-trigger { display: inline-grid; place-items: center; padding: 24px; max-width: 100%; box-sizing: border-box; }
.am-fx.am-fx {
  --ink: #181818; --pink: #FE7DDA; --mint: #85E8B9;
  --ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem; min-height: 64px; max-width: 100%; box-sizing: border-box;
  padding: 1rem 2rem; margin: 0; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform 280ms var(--ease);
}

.am-fx:focus-visible { outline: 3px solid #7287ff; outline-offset: 8px; }
.am-fx > span { position: relative; z-index: 1; }


/* Circle rolls to the right */
.am-fx.am-arrow { width: 280px; min-height: 72px; padding: 0; container-type: inline-size; background: var(--mint); color: var(--ink); box-shadow: -5px 5px 0 var(--ink); }
.am-arrow .am-icon { position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--mint); font-size: 1.8rem; transition: transform 600ms cubic-bezier(.77,0,.175,1); }
.am-arrow .am-label { display: block; transform: translateX(30px); transition: transform 600ms cubic-bezier(.77,0,.175,1); }
@media (prefers-reduced-motion: no-preference) {
:is(.am-arrow:hover, .am-trigger:hover .am-arrow) .am-icon { transform: translateX(calc(100cqw - 68px)) rotate(360deg); }
:is(.am-arrow:hover, .am-trigger:hover .am-arrow) .am-label { transform: translateX(-30px); }
}

@media (prefers-reduced-motion: reduce) { .am-fx, .am-fx *, .am-fx::before, .am-fx::after { transition: none !important; animation: none !important; } }

.am-arrow .am-icon svg { display: block; width: 28px; height: 28px; }
</style>

03

Rolling text, new message

TEXT / REVEAL

Hover to play · Click for details

“Curious?” rolls up to reveal “Let’s go!” with a star. Two messages share the same little reel.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-roll" aria-label="Curious?"><span class="am-window" aria-hidden="true"><span class="am-track"><span>Curious?</span><span>Let’s go! →</span></span></span></button>
</span>

<style>
/* Quelle / Source: anitamostofa.com — CSS Button Lab */
.am-trigger { display: inline-grid; place-items: center; padding: 24px; max-width: 100%; box-sizing: border-box; }
.am-fx.am-fx {
  --ink: #181818; --pink: #FE7DDA; --mint: #85E8B9;
  --ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem; min-height: 64px; max-width: 100%; box-sizing: border-box;
  padding: 1rem 2rem; margin: 0; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform 280ms var(--ease);
}

.am-fx:focus-visible { outline: 3px solid #7287ff; outline-offset: 8px; }
.am-fx > span { position: relative; z-index: 1; }

/* Rolling text, new message */
.am-fx.am-roll { border-radius: 10px; background: #7287ff; box-shadow: 0 5px 0 #a695ff40, 0 12px 24px #9a7cff26; transform: rotate(-3deg); }
.am-roll .am-window { display: block; height: 1.4em; overflow: hidden; }
.am-roll .am-track, .am-roll .am-track > span { display: block; }
.am-roll .am-track { transition: transform 280ms var(--ease); }
@media (prefers-reduced-motion: no-preference) {
:is(.am-fx.am-roll:hover, .am-trigger:hover .am-fx.am-roll) { transform: rotate(0); }
:is(.am-roll:hover, .am-trigger:hover .am-roll) .am-track { transform: translateY(-50%); }
}
.am-fx.am-roll:active { transform: rotate(0); }
.am-roll:active .am-track { transform: translateY(-50%); }
/* Respect reduced motion; keep decorative particles hidden. */
@media (prefers-reduced-motion: reduce) {
  .am-fx, .am-fx *, .am-fx::before, .am-fx::after { transition: none !important; animation: none !important; }
  :is(.am-fx:hover, .am-trigger:hover .am-fx), .am-fx:active { transform: none !important; }
  .am-hearts .am-heart { display: none; }
}
</style>

04

Pressable candy key

GLOSS / LIGHT

Hover to play · Click for details

On hover, the glossy face sinks until its thick shadow edge disappears. A click adds a short press response, while the highlight and star move with it.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-shine" aria-label="Shine on"><span class="am-label">Shine on</span><span class="am-icon" aria-hidden="true">✦</span></button>
</span>

<style>
/* Quelle / Source: anitamostofa.com — CSS Button Lab */
.am-trigger { display: inline-grid; place-items: center; padding: 24px; max-width: 100%; box-sizing: border-box; }
.am-fx.am-fx {
  --ink: #181818; --pink: #FE7DDA; --mint: #85E8B9;
  --ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem; min-height: 64px; max-width: 100%; box-sizing: border-box;
  padding: 1rem 2rem; margin: 0; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform 280ms var(--ease);
}

.am-fx:focus-visible { outline: 3px solid #7287ff; outline-offset: 8px; }
.am-fx > span { position: relative; z-index: 1; }

/* Glossy candy */
.am-fx.am-shine { overflow: hidden; border-color: #e456a6; background: linear-gradient(#ffb3eb, #fe7dda 60%, #e456a6); box-shadow: inset 0 3px 2px #fff9, inset 0 -5px 6px #b1308555, 0 8px 0 #a3357e; }
.am-shine::before { content: ""; position: absolute; inset: -60%; background: linear-gradient(110deg, transparent 40%, #fffe 50%, transparent 60%); transform: translateX(-100%); opacity: 0; transition: opacity 180ms linear, transform 0s 180ms; }
.am-shine .am-icon { display: inline-block; font-size: 1.6em; transition: transform 280ms var(--ease); }
@media (prefers-reduced-motion: no-preference) {
:is(.am-shine:hover, .am-trigger:hover .am-shine)::before { transform: translateX(100%); opacity: .8; transition: transform 850ms linear, opacity 140ms linear; }
:is(.am-shine:hover, .am-trigger:hover .am-shine) .am-icon { transform: rotate(100deg) scale(1.25); }
:is(.am-fx.am-shine:hover, .am-trigger:hover .am-fx.am-shine) { transform: translateY(8px); box-shadow: inset 0 3px 2px #fff9, inset 0 -2px 3px #b1308555, 0 0 0 #a3357e; }
}
.am-shine:active::before { transform: translateX(100%); opacity: .8; transition: transform 850ms linear, opacity 140ms linear; }
.am-shine:active .am-icon { transform: rotate(100deg) scale(1.25); }
.am-fx.am-shine:active { transform: translateY(8px) scale(.97); }
/* Respect reduced motion; keep decorative particles hidden. */
@media (prefers-reduced-motion: reduce) {
  .am-fx, .am-fx *, .am-fx::before, .am-fx::after { transition: none !important; animation: none !important; }
  :is(.am-fx:hover, .am-trigger:hover .am-fx), .am-fx:active { transform: none !important; }
  .am-hearts .am-heart { display: none; }
}

.am-fx.am-shine:active { transform: translateY(8px) scale(.97); }
</style>

05

Liquid fill

LIQUID / FILL

Hover to play · Click for details

Two mint waves rise slowly behind the label, with a slight delay between them. The fill takes about 1.9 seconds so the motion stays easy to follow. The arrow turns gently with it.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-wave" aria-label="Dive in"><span class="am-label">Dive in</span><span class="am-icon" aria-hidden="true">↗</span></button>
</span>

<style>
/* Quelle / Source: anitamostofa.com — CSS Button Lab */
.am-trigger { display: inline-grid; place-items: center; padding: 24px; max-width: 100%; box-sizing: border-box; }
.am-fx.am-fx {
  --ink: #181818; --pink: #FE7DDA; --mint: #85E8B9;
  --ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem; min-height: 64px; max-width: 100%; box-sizing: border-box;
  padding: 1rem 2rem; margin: 0; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform 280ms var(--ease);
}

.am-fx:focus-visible { outline: 3px solid #7287ff; outline-offset: 8px; }
.am-fx > span { position: relative; z-index: 1; }

/* Liquid fill: deliberately slow to make both waves visible. */
.am-fx.am-wave { overflow: hidden; border-radius: 36px 8px 36px 8px; background: transparent; color: inherit; border-color: currentColor; transition: color 600ms ease 150ms; }
.am-wave::before, .am-wave::after { content: ""; position: absolute; inset: -130% -30%; border-radius: 42%; background: var(--mint); transform: translateY(85%) rotate(-20deg); transition: transform 900ms linear; z-index: -1; }
.am-wave::before { opacity: .45; }
.am-wave .am-icon { display: inline-block; transition: transform 850ms cubic-bezier(.77,0,.175,1); }

@media (prefers-reduced-motion: no-preference) {
:is(.am-wave:hover, .am-trigger:hover .am-wave)::before { transform: translateY(12%) rotate(15deg); transition: transform 1600ms linear; }
:is(.am-wave:hover, .am-trigger:hover .am-wave)::after { transform: translateY(18%) rotate(-10deg); transition: transform 1700ms linear 180ms; }
:is(.am-fx.am-wave:hover, .am-trigger:hover .am-fx.am-wave) { color: var(--ink); background: transparent; transition: color 700ms linear 500ms; }
:is(.am-wave:hover, .am-trigger:hover .am-wave) .am-icon { transform: rotate(-45deg); }
.am-wave:active::before { transform: translateY(12%) rotate(15deg); transition: transform 1600ms linear; }
.am-wave:active::after { transform: translateY(18%) rotate(-10deg); transition: transform 1700ms linear 180ms; }
.am-fx.am-wave:active { color: var(--ink); background: transparent; transition: color 700ms linear 500ms; }
.am-wave:active .am-icon { transform: rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) { .am-fx.am-wave, .am-wave::before, .am-wave::after, .am-wave .am-icon { transition: none !important; } }
</style>

06

Arcade key

ARCADE / PRESS

Hover to play · Click for details

The dark base stays fixed. On hover only the mint top face moves down to cover the side wall; pressing closes the remaining gap.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-press" aria-label="PLAY"><span class="am-face"><span class="am-label">PLAY</span><span class="am-icon" aria-hidden="true">▶</span></span></button>
</span>

<style>
/* Quelle / Source: anitamostofa.com — CSS Button Lab */
.am-trigger { display: inline-grid; place-items: center; padding: 24px; max-width: 100%; box-sizing: border-box; }
.am-fx.am-fx {
  --ink: #181818; --pink: #FE7DDA; --mint: #85E8B9;
  --ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem; min-height: 64px; max-width: 100%; box-sizing: border-box;
  padding: 1rem 2rem; margin: 0; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform 280ms var(--ease);
}

.am-fx:focus-visible { outline: 3px solid #7287ff; outline-offset: 8px; }
.am-fx > span { position: relative; z-index: 1; }


/* Arcade key */
.am-fx.am-press { padding: 0; min-width: 220px; min-height: 104px; font-size: 1.2rem; background: transparent; border: 0; border-radius: 14px; letter-spacing: .16em; }
.am-press::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: 14px; background: #329a70; transform: translateY(12px); }
.am-press .am-face { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; min-height: 104px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 14px; background: var(--mint); padding: 1.2rem 2rem; transition: transform 160ms var(--ease); }
.am-press .am-icon { font-size: 1em; }
@media (prefers-reduced-motion: no-preference) {
:is(.am-press:hover, .am-trigger:hover .am-press) .am-face { transform: translateY(9px); }
}
.am-press:active .am-face { transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) { .am-fx, .am-fx *, .am-fx::before, .am-fx::after { transition: none !important; animation: none !important; } }
</style>

07

Heart confetti

HEARTS / POP

Hover to play · Click for details

Five softly rounded drawn hearts fan out on hover. Gentle gradients, highlights and a narrow lower edge give them volume.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-hearts" aria-label="Made with love"><span class="am-label">Made with love</span><span class="am-heart" aria-hidden="true"><svg viewBox="0 0 64 64"><defs><linearGradient id="am-heart-0" x1="0" y1="0" x2=".8" y2="1"><stop stop-color="#ffd3f1"/><stop offset=".48" stop-color="#ff88da"/><stop offset="1" stop-color="#db55ac"/></linearGradient></defs><path d="M32 55C25 49 8 38 8 23C8 9 25 5 32 18C39 5 56 9 56 23C56 38 39 49 32 55Z" fill="#db55ac" transform="translate(0 3)"/><path d="M32 55C25 49 8 38 8 23C8 9 25 5 32 18C39 5 56 9 56 23C56 38 39 49 32 55Z" fill="url(#am-heart-0)"/><path d="M15 24C15 16 23 14 27 20" fill="none" stroke="#fff" stroke-opacity=".65" stroke-width="3.5" stroke-linecap="round"/></svg></span><span class="am-heart" aria-hidden="true"><svg viewBox="0 0 64 64"><defs><linearGradient id="am-heart-1" x1="0" y1="0" x2=".8" y2="1"><stop stop-color="#d7ddff"/><stop offset=".48" stop-color="#8795ff"/><stop offset="1" stop-color="#5b62d4"/></linearGradient></defs><path d="M32 55C25 49 8 38 8 23C8 9 25 5 32 18C39 5 56 9 56 23C56 38 39 49 32 55Z" fill="#5b62d4" transform="translate(0 3)"/><path d="M32 55C25 49 8 38 8 23C8 9 25 5 32 18C39 5 56 9 56 23C56 38 39 49 32 55Z" fill="url(#am-heart-1)"/><path d="M15 24C15 16 23 14 27 20" fill="none" stroke="#fff" stroke-opacity=".65" stroke-width="3.5" stroke-linecap="round"/></svg></span><span class="am-heart" aria-hidden="true"><svg viewBox="0 0 64 64"><defs><linearGradient id="am-heart-2" x1="0" y1="0" x2=".8" y2="1"><stop stop-color="#ffd3f1"/><stop offset=".48" stop-color="#ff88da"/><stop offset="1" stop-color="#db55ac"/></linearGradient></defs><path d="M32 55C25 49 8 38 8 23C8 9 25 5 32 18C39 5 56 9 56 23C56 38 39 49 32 55Z" fill="#db55ac" transform="translate(0 3)"/><path d="M32 55C25 49 8 38 8 23C8 9 25 5 32 18C39 5 56 9 56 23C56 38 39 49 32 55Z" fill="url(#am-heart-2)"/><path d="M15 24C15 16 23 14 27 20" fill="none" stroke="#fff" stroke-opacity=".65" stroke-width="3.5" stroke-linecap="round"/></svg></span><span class="am-heart" aria-hidden="true"><svg viewBox="0 0 64 64"><defs><linearGradient id="am-heart-3" x1="0" y1="0" x2=".8" y2="1"><stop stop-color="#d7ddff"/><stop offset=".48" stop-color="#8795ff"/><stop offset="1" stop-color="#5b62d4"/></linearGradient></defs><path d="M32 55C25 49 8 38 8 23C8 9 25 5 32 18C39 5 56 9 56 23C56 38 39 49 32 55Z" fill="#5b62d4" transform="translate(0 3)"/><path d="M32 55C25 49 8 38 8 23C8 9 25 5 32 18C39 5 56 9 56 23C56 38 39 49 32 55Z" fill="url(#am-heart-3)"/><path d="M15 24C15 16 23 14 27 20" fill="none" stroke="#fff" stroke-opacity=".65" stroke-width="3.5" stroke-linecap="round"/></svg></span><span class="am-heart" aria-hidden="true"><svg viewBox="0 0 64 64"><defs><linearGradient id="am-heart-4" x1="0" y1="0" x2=".8" y2="1"><stop stop-color="#ffd3f1"/><stop offset=".48" stop-color="#ff88da"/><stop offset="1" stop-color="#db55ac"/></linearGradient></defs><path d="M32 55C25 49 8 38 8 23C8 9 25 5 32 18C39 5 56 9 56 23C56 38 39 49 32 55Z" fill="#db55ac" transform="translate(0 3)"/><path d="M32 55C25 49 8 38 8 23C8 9 25 5 32 18C39 5 56 9 56 23C56 38 39 49 32 55Z" fill="url(#am-heart-4)"/><path d="M15 24C15 16 23 14 27 20" fill="none" stroke="#fff" stroke-opacity=".65" stroke-width="3.5" stroke-linecap="round"/></svg></span></button>
</span>

<style>
/* Quelle / Source: anitamostofa.com — CSS Button Lab */
.am-trigger { display: inline-grid; place-items: center; padding: 24px; max-width: 100%; box-sizing: border-box; }
.am-fx.am-fx {
  --ink: #181818; --pink: #FE7DDA; --mint: #85E8B9;
  --ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem; min-height: 64px; max-width: 100%; box-sizing: border-box;
  padding: 1rem 2rem; margin: 0; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform 280ms var(--ease);
}

.am-fx:focus-visible { outline: 3px solid #7287ff; outline-offset: 8px; }
.am-fx > span { position: relative; z-index: 1; }

/* Heart confetti */
.am-fx.am-hearts { background: #fff3e4; border-color: #e456a6; color: #852955; box-shadow: 0 5px 0 #e456a6; }
.am-hearts .am-heart { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: #e456a6; font-size: 3rem; line-height: 1;  opacity: 0; transform: translateY(0) scale(.9); transition: transform 280ms var(--ease), opacity 160ms ease; }
.am-heart svg { display: block; width: 48px; height: 48px; overflow: visible; }
.am-hearts .am-heart:nth-of-type(3) { color: #7287ff; transition-delay: 35ms; }
.am-hearts .am-heart:nth-of-type(4) { color: #e456a6; transition-delay: 65ms; }
.am-hearts .am-heart:nth-of-type(5) { color: #7287ff; transition-delay: 90ms; }
@media (prefers-reduced-motion: no-preference) {
:is(.am-fx.am-hearts:hover, .am-trigger:hover .am-fx.am-hearts) { background: #fff3e4; color: #852955; transform: rotate(-4deg) translateY(-3px); }
:is(.am-hearts:hover, .am-trigger:hover .am-hearts) .am-heart { opacity: 1; }
:is(.am-hearts:hover, .am-trigger:hover .am-hearts) .am-heart:nth-of-type(2) { transform: translate(-90px, -50px) rotate(-25deg); }
:is(.am-hearts:hover, .am-trigger:hover .am-hearts) .am-heart:nth-of-type(3) { transform: translate(-40px, -78px) rotate(15deg) scale(.95); }
:is(.am-hearts:hover, .am-trigger:hover .am-hearts) .am-heart:nth-of-type(4) { transform: translate(32px, -74px) rotate(-10deg); }
:is(.am-hearts:hover, .am-trigger:hover .am-hearts) .am-heart:nth-of-type(5) { transform: translate(94px, -40px) rotate(25deg) scale(.95); }
:is(.am-hearts:hover, .am-trigger:hover .am-hearts) .am-heart:nth-of-type(6) { transform: translate(108px, 26px) rotate(15deg) scale(.85); }
}
.am-fx.am-hearts:active { background: #fff3e4; color: #852955; transform: rotate(-4deg) translateY(-3px); }
.am-hearts:active .am-heart { opacity: 1; }
.am-hearts:active .am-heart:nth-of-type(2) { transform: translate(-90px, -50px) rotate(-25deg); }
.am-hearts:active .am-heart:nth-of-type(3) { transform: translate(-40px, -78px) rotate(15deg) scale(.95); }
.am-hearts:active .am-heart:nth-of-type(4) { transform: translate(32px, -74px) rotate(-10deg); }
.am-hearts:active .am-heart:nth-of-type(5) { transform: translate(94px, -40px) rotate(25deg) scale(.95); }
.am-hearts:active .am-heart:nth-of-type(6) { transform: translate(108px, 26px) rotate(15deg) scale(.85); }
/* Respect reduced motion; keep decorative particles hidden. */
@media (prefers-reduced-motion: reduce) {
  .am-fx, .am-fx *, .am-fx::before, .am-fx::after { transition: none !important; animation: none !important; }
  :is(.am-fx:hover, .am-trigger:hover .am-fx), .am-fx:active { transform: none !important; }
  .am-hearts .am-heart { display: none; }
}
</style>

08

Neon tube with light fill

NEON / GLOW

Hover to play · Click for details

First the pink outline lights up like a neon tube. Coloured light then spreads inside from the left after a short delay.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-neon" aria-label="Stay curious"><svg class="am-tube" viewBox="0 0 240 72" preserveAspectRatio="none" aria-hidden="true"><rect x="2" y="2" width="236" height="68" rx="14"/></svg><span class="am-label">Stay curious</span><span class="am-icon" aria-hidden="true">↯</span></button>
</span>

<style>
/* Quelle / Source: anitamostofa.com — CSS Button Lab */
.am-trigger { display: inline-grid; place-items: center; padding: 24px; max-width: 100%; box-sizing: border-box; }
.am-fx.am-fx {
  --ink: #181818; --pink: #FE7DDA; --mint: #85E8B9;
  --ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem; min-height: 64px; max-width: 100%; box-sizing: border-box;
  padding: 1rem 2rem; margin: 0; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform 280ms var(--ease);
}

.am-fx:focus-visible { outline: 3px solid #7287ff; outline-offset: 8px; }
.am-fx > span { position: relative; z-index: 1; }


/* Neon tube with light fill */
.am-fx.am-neon { min-width: 240px; min-height: 72px; border: 0; border-radius: 16px; background: #110728; color: #fff; }
.am-neon .am-tube { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: .35; transition: opacity 180ms ease; }
.am-neon .am-tube rect { fill: none; stroke: #fe7dda; stroke-width: 2; filter: drop-shadow(0 0 3px #fe7dda) drop-shadow(0 0 7px #fe7dda); }
.am-neon::before { content: ""; position: absolute; inset: -8px; border-radius: inherit; background: linear-gradient(100deg,#fe7dda,#7287ff,#85e8b9); filter: blur(18px); opacity: 0; z-index: -2; transition: opacity 240ms ease; }
.am-neon::after { content: ""; position: absolute; inset: 3px; border-radius: 13px; background: linear-gradient(100deg,#fe7dda88,#7287ff88,#85e8b988); opacity: 0; transform: scaleX(.03); transform-origin: left; z-index: -1; transition: transform 280ms var(--ease), opacity 180ms ease; }
.am-neon .am-icon { font-size: 1.6rem; color: #fe7dda; }
@media (prefers-reduced-motion: no-preference) {
:is(.am-neon:hover, .am-trigger:hover .am-neon) .am-tube { opacity: 1; }
:is(.am-neon:hover, .am-trigger:hover .am-neon)::after { opacity: 1; transform: scaleX(1); transition: transform 600ms var(--ease) 180ms, opacity 240ms ease 180ms; }
:is(.am-neon:hover, .am-trigger:hover .am-neon)::before { opacity: .45; transition-delay: 340ms; }
}

@media (prefers-reduced-motion: reduce) { .am-fx, .am-fx *, .am-fx::before, .am-fx::after { transition: none !important; animation: none !important; } }
</style>

09

3D flip with text swap

3D / FLIP

Hover to play · Click for details

The front face folds backwards to reveal “Let’s talk” on a second plane. A real spatial flip.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-flip" aria-label="Got an idea?"><span class="am-cube" aria-hidden="true"><span class="am-face">Got an idea?</span><span class="am-face am-back">Let’s talk ↗</span></span></button>
</span>

<style>
/* Quelle / Source: anitamostofa.com — CSS Button Lab */
.am-trigger { display: inline-grid; place-items: center; padding: 24px; max-width: 100%; box-sizing: border-box; }
.am-fx.am-fx {
  --ink: #181818; --pink: #FE7DDA; --mint: #85E8B9;
  --ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem; min-height: 64px; max-width: 100%; box-sizing: border-box;
  padding: 1rem 2rem; margin: 0; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform 280ms var(--ease);
}

.am-fx:focus-visible { outline: 3px solid #7287ff; outline-offset: 8px; }
.am-fx > span { position: relative; z-index: 1; }

/* 3D flip with text swap */
.am-fx.am-flip { border: 0; border-radius: 0; background: transparent; min-width: 220px; padding: 0; perspective: 650px; }
.am-flip .am-cube { display: block; position: relative; width: 100%; height: 64px; transform-style: preserve-3d; transition: transform 280ms var(--ease); }
.am-flip .am-face { position: absolute; inset: 0; display: grid; place-items: center; border: 2px solid #181818; border-radius: 10px; backface-visibility: hidden; background: #fe7dda; color: #181818; transform: translateZ(32px); }
.am-flip .am-back { background: #85e8b9; transform: rotateX(-90deg) translateZ(32px); }
@media (prefers-reduced-motion: no-preference) {
:is(.am-fx.am-flip:hover, .am-trigger:hover .am-fx.am-flip) { background: transparent; }
:is(.am-flip:hover, .am-trigger:hover .am-flip) .am-cube { transform: rotateX(90deg); }
}
.am-fx.am-flip:active { background: transparent; }
.am-flip:active .am-cube { transform: rotateX(90deg); }
/* Respect reduced motion; keep decorative particles hidden. */
@media (prefers-reduced-motion: reduce) {
  .am-fx, .am-fx *, .am-fx::before, .am-fx::after { transition: none !important; animation: none !important; }
  :is(.am-fx:hover, .am-trigger:hover .am-fx), .am-fx:active { transform: none !important; }
  .am-hearts .am-heart { display: none; }
}
</style>

10

Open the curtain

SPLIT / REVEAL

Hover to play · Click for details

Two dark panels slide apart like curtains, revealing a new message. Three little stars pop up one after another above the upper-right corner.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-shutters" aria-label="Surprise me"><span class="am-curtain"><span class="am-front" aria-hidden="true">Surprise me</span><span class="am-reveal" aria-hidden="true">Hello, wow! →</span></span><span class="am-spark am-spark-1" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><path d="M12 1C13 8 16 11 23 12C16 13 13 16 12 23C11 16 8 13 1 12C8 11 11 8 12 1Z" fill="currentColor"/></svg></span><span class="am-spark am-spark-2" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><path d="M12 1C13 8 16 11 23 12C16 13 13 16 12 23C11 16 8 13 1 12C8 11 11 8 12 1Z" fill="currentColor"/></svg></span><span class="am-spark am-spark-3" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><path d="M12 1C13 8 16 11 23 12C16 13 13 16 12 23C11 16 8 13 1 12C8 11 11 8 12 1Z" fill="currentColor"/></svg></span></button>
</span>

<style>
/* Quelle / Source: anitamostofa.com — CSS Button Lab */
.am-trigger { display: inline-grid; place-items: center; padding: 24px; max-width: 100%; box-sizing: border-box; }
.am-fx.am-fx {
  --ink: #181818; --pink: #FE7DDA; --mint: #85E8B9;
  --ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem; min-height: 64px; max-width: 100%; box-sizing: border-box;
  padding: 1rem 2rem; margin: 0; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform 280ms var(--ease);
}

.am-fx:focus-visible { outline: 3px solid #7287ff; outline-offset: 8px; }
.am-fx > span { position: relative; z-index: 1; }

/* Open the curtain */
.am-fx.am-shutters { padding: 0; border: 0; border-radius: 0; background: transparent; color: #181818; min-width: 240px; overflow: visible; }
.am-shutters .am-curtain { position: relative; display: grid; place-items: center; width: 100%; min-height: 64px; padding: 1rem 2rem; box-sizing: border-box; border: 2px solid var(--ink); overflow: hidden; background: var(--mint); }
.am-curtain::before, .am-curtain::after { content: ""; position: absolute; inset: 0 50% 0 0; background: #181818; z-index: 2; transition: transform 280ms var(--ease); }
.am-curtain::after { inset: 0 0 0 50%; }
.am-shutters .am-front { position: absolute; z-index: 3; color: #fff; transition: transform 280ms var(--ease), opacity 160ms ease; }
.am-shutters .am-reveal { display: inline-block; transform: translateY(160%); transition: transform 280ms var(--ease); }
.am-shutters .am-spark { position: absolute; display: block; pointer-events: none; z-index: 4; opacity: 0; transform: translate(-8px,12px) rotate(-20deg) scale(.9); transition: opacity 180ms ease, transform 280ms var(--ease); }
.am-spark svg { display: block; width: 100%; height: 100%; }
.am-shutters .am-spark-1 { width: 30px; height: 30px; right: -14px; top: -24px; color: #fe7dda; }
.am-shutters .am-spark-2 { width: 17px; height: 17px; right: 20px; top: -38px; color: #85e8b9; }
.am-shutters .am-spark-3 { width: 14px; height: 14px; right: -24px; top: 8px; color: #a695ff; }

@media (prefers-reduced-motion: no-preference) {
:is(.am-shutters:hover, .am-trigger:hover .am-shutters) .am-curtain::before { transform: translateX(-100%); }
:is(.am-shutters:hover, .am-trigger:hover .am-shutters) .am-curtain::after { transform: translateX(100%); }
:is(.am-shutters:hover, .am-trigger:hover .am-shutters) .am-front { opacity: 0; transform: translateY(-140%); }
:is(.am-shutters:hover, .am-trigger:hover .am-shutters) .am-reveal { transform: translateY(0); }
:is(.am-shutters:hover, .am-trigger:hover .am-shutters) .am-spark { opacity: 1; transform: translate(0,0) rotate(8deg) scale(1); transition-delay: 150ms; }
:is(.am-shutters:hover, .am-trigger:hover .am-shutters) .am-spark-2 { transition-delay: 220ms; }
:is(.am-shutters:hover, .am-trigger:hover .am-shutters) .am-spark-3 { transition-delay: 290ms; }
.am-shutters:active .am-curtain::before { transform: translateX(-100%); }
.am-shutters:active .am-curtain::after { transform: translateX(100%); }
.am-shutters:active .am-front { opacity: 0; transform: translateY(-140%); }
.am-shutters:active .am-reveal { transform: translateY(0); }
.am-shutters:active .am-spark { opacity: 1; transform: translate(0,0) rotate(8deg) scale(1); transition-delay: 150ms; }
.am-shutters:active .am-spark-2 { transition-delay: 220ms; }
.am-shutters:active .am-spark-3 { transition-delay: 290ms; }
}
@media (prefers-reduced-motion: reduce) { .am-shutters *, .am-curtain::before, .am-curtain::after { transition: none !important; } .am-shutters .am-spark { display: none; } }
</style>

11

An opening envelope

PAPER / OPEN

Hover to play · Click for details

The envelope flap opens first, then the greeting card rises in front of it and stays readable. Leaving the hover area slides the card back before the envelope closes.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-fold" aria-label="Open letter"><span class="am-envelope-back" aria-hidden="true"></span><span class="am-open-flap" aria-hidden="true"></span><span class="am-letter-window"><span class="am-card" aria-hidden="true">Hello there!</span></span><span class="am-pocket" aria-hidden="true"><svg viewBox="0 0 230 100" preserveAspectRatio="none" focusable="false"><path d="M0 0L115 32L230 0M0 100L87 40M230 100L143 40" fill="none" stroke="#d8b5a2" stroke-width="1"/></svg></span><span class="am-closed-flap" aria-hidden="true"></span><span class="am-label">Open letter</span></button>
</span>

<style>
/* Quelle / Source: anitamostofa.com — CSS Button Lab */
.am-trigger { display: inline-grid; place-items: center; padding: 24px; max-width: 100%; box-sizing: border-box; }
.am-fx.am-fx {
  --ink: #181818; --pink: #FE7DDA; --mint: #85E8B9;
  --ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem; min-height: 64px; max-width: 100%; box-sizing: border-box;
  padding: 1rem 2rem; margin: 0; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform 280ms var(--ease);
}

.am-fx:focus-visible { outline: 3px solid #7287ff; outline-offset: 8px; }
.am-fx > span { position: relative; z-index: 1; }

/* Opening envelope: flat stacking avoids 3D back-face overlap. */
.am-fx.am-fold { width: 200px; height: 100px; padding: 0; border: 0; border-radius: 8px; background: transparent; overflow: visible; }
.am-fold .am-envelope-back { position: absolute; inset: 0; border: 2px solid #181818; border-radius: 8px; background: #d8bea4; z-index: 0; }
.am-fold .am-open-flap { position: absolute; top: 2px; left: 2px; right: 2px; height: 58px; background: #f3ddc4; clip-path: polygon(50% 0,100% 100%,0 100%); z-index: 1; transform-origin: bottom; transform: translateY(-100%) scaleY(.02); opacity: 0; transition: transform 220ms var(--ease) 200ms, opacity 180ms ease 200ms; }
.am-fold .am-letter-window { position: absolute; top: -64px; left: 8px; right: 8px; bottom: 2px; overflow: hidden; z-index: 2; }
.am-fold .am-card { position: absolute; bottom: 10px; left: 6px; right: 6px; height: 80px; box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; padding: 10px 8px; border-radius: 5px; background: #fff9ef; color: #181818; z-index: 2; transform: translateY(0); opacity: 0; transition: transform 240ms var(--ease), opacity 120ms ease 120ms; }
.am-fold .am-pocket { position: absolute; inset: 2px; border-radius: 6px; background: #fff3e4; clip-path: polygon(0 0,50% 32%,100% 0,100% 100%,0 100%); z-index: 3; pointer-events: none; }
.am-fold .am-pocket svg { display: block; width: 100%; height: 100%; }
.am-fold .am-closed-flap { position: absolute; top: 2px; left: 2px; right: 2px; height: 64px; background: #f3ddc4; clip-path: polygon(0 0,100% 0,50% 100%); z-index: 4; transform-origin: top; transform: scaleY(1); opacity: 1; transition: transform 200ms var(--ease) 220ms, opacity 180ms ease 220ms; }
.am-fold .am-label { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: .85rem; z-index: 5; }

@media (prefers-reduced-motion: no-preference) {
:is(.am-fold:hover, .am-trigger:hover .am-fold) .am-closed-flap { transform: scaleY(.02); opacity: 0; transition-delay: 0s; }
:is(.am-fold:hover, .am-trigger:hover .am-fold) .am-open-flap { transform: translateY(-100%) scaleY(1); opacity: 1; transition-delay: 70ms; }
:is(.am-fold:hover, .am-trigger:hover .am-fold) .am-card { transform: translateY(-48px); opacity: 1; transition: transform 360ms var(--ease) 200ms, opacity 120ms ease 180ms; }
.am-fold:active .am-closed-flap { transform: scaleY(.02); opacity: 0; transition-delay: 0s; }
.am-fold:active .am-open-flap { transform: translateY(-100%) scaleY(1); opacity: 1; transition-delay: 70ms; }
.am-fold:active .am-card { transform: translateY(-48px); opacity: 1; transition: transform 360ms var(--ease) 200ms, opacity 120ms ease 180ms; }
}
@media (prefers-reduced-motion: reduce) { .am-fold * { transition: none !important; } }
</style>

12

Laser scan

LASER / SCAN

Hover to play · Click for details

A luminous line sweeps once from top to bottom across the angular button. The label stays clear and readable.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-glitch" aria-label="Run scan"><span class="am-label">Run scan</span><svg class="am-scan-frame" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true" focusable="false"><polygon points="1,1 91.5,1 99,25.5 99,99 8.5,99 1,74.5" fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke"/></svg></button>
</span>

<style>
/* Quelle / Source: anitamostofa.com — CSS Button Lab */
.am-trigger { display: inline-grid; place-items: center; padding: 24px; max-width: 100%; box-sizing: border-box; }
.am-fx.am-fx {
  --ink: #181818; --pink: #FE7DDA; --mint: #85E8B9;
  --ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem; min-height: 64px; max-width: 100%; box-sizing: border-box;
  padding: 1rem 2rem; margin: 0; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform 280ms var(--ease);
}

.am-fx:focus-visible { outline: 3px solid #7287ff; outline-offset: 8px; }
.am-fx > span { position: relative; z-index: 1; }


/* Laser scan */
.am-fx.am-glitch { border-radius: 0; overflow: hidden; background: #181818; color: #85e8b9; border: 0; padding: 1.2rem 2rem; clip-path: polygon(0 0,92% 0,100% 25%,100% 100%,8% 100%,0 75%); }
.am-glitch::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: #fe7dda; box-shadow: 0 0 12px #fe7dda, 0 -8px 18px #fe7dda88; opacity: 0; transform: translateY(0); pointer-events: none; transition: opacity 180ms ease, transform 0s 180ms; }
@media (prefers-reduced-motion: no-preference) {
:is(.am-glitch:hover, .am-trigger:hover .am-glitch)::before { opacity: 1; transform: translateY(68px); transition: transform 700ms linear, opacity 120ms ease; }
}

@media (prefers-reduced-motion: reduce) { .am-fx, .am-fx *, .am-fx::before, .am-fx::after { transition: none !important; animation: none !important; } }

.am-glitch .am-scan-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 2; }
</style>

13

Rocket launch with colour smoke

ROCKET / SMOKE

Hover to play · Click for details

A drawn emoji-style rocket ignites on hover and takes off diagonally. Its pink smoke spreads behind it to colour the button surface. Leaving the hover area resets the preview.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-launch" aria-label="Ready?"><span class="am-paint" aria-hidden="true"><span class="am-smoke am-smoke-one"></span><span class="am-smoke am-smoke-two"></span><span class="am-smoke am-smoke-three"></span></span><span class="am-label">Ready?</span><span class="am-message" aria-hidden="true">Take off!</span><span class="am-flight" aria-hidden="true"><span class="am-rocket"><svg viewBox="0 0 80 124" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="am-rocket-body" x1="0" x2="1"><stop stop-color="#b8c1d6"/><stop offset=".35" stop-color="#fffdf7"/><stop offset=".7" stop-color="#e6eafb"/><stop offset="1" stop-color="#9da9ca"/></linearGradient><linearGradient id="am-rocket-red" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#ffb7db"/><stop offset=".5" stop-color="#ff6eaa"/><stop offset="1" stop-color="#c9387b"/></linearGradient><radialGradient id="am-rocket-window"><stop stop-color="#aaf6ff"/><stop offset=".6" stop-color="#7287ff"/><stop offset="1" stop-color="#39468a"/></radialGradient></defs><g class="am-flame"><path d="M31 82Q24 103 40 120Q56 103 49 82Z" fill="#ff8855"/><path d="M35 83Q31 99 40 110Q49 99 45 83Z" fill="#ffeaa0"/><path d="M38 83Q35 93 40 99Q45 93 42 83Z" fill="#fffdf4"/></g><path d="M27 46L14 63Q10 72 12 89L29 76Z" fill="url(#am-rocket-red)"/><path d="M53 46L66 63Q70 72 68 89L51 76Z" fill="url(#am-rocket-red)"/><path d="M40 7C23 23 21 51 27 79Q40 85 53 79C59 51 57 23 40 7Z" fill="url(#am-rocket-body)"/><path d="M40 7C32 15 27 24 25 34Q40 29 55 34C53 24 48 15 40 7Z" fill="url(#am-rocket-red)"/><rect x="29" y="77" width="22" height="9" rx="4" fill="#4d5274"/><circle cx="40" cy="48" r="12" fill="#7e88ab"/><circle cx="40" cy="48" r="9.5" fill="url(#am-rocket-window)"/><ellipse cx="37" cy="44" rx="4" ry="2.5" fill="#fff" opacity=".75" transform="rotate(-35 37 44)"/><path d="M30 36Q26 53 30 68" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity=".65"/></svg></span></span></button>
</span>

<style>
/* Quelle / Source: anitamostofa.com — CSS Button Lab */
.am-trigger { display: inline-grid; place-items: center; padding: 24px; max-width: 100%; box-sizing: border-box; }
.am-fx.am-fx {
  --ink: #181818; --pink: #FE7DDA; --mint: #85E8B9;
  --ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem; min-height: 64px; max-width: 100%; box-sizing: border-box;
  padding: 1rem 2rem; margin: 0; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform 280ms var(--ease);
}

.am-fx:focus-visible { outline: 3px solid #7287ff; outline-offset: 8px; }
.am-fx > span { position: relative; z-index: 1; }


/* Illustrated rocket: self-contained SVG + CSS, no GIF or external file. */
.am-fx.am-launch { width: 250px; min-height: 82px; padding: 0; border: 0; border-radius: 20px 48px 20px 48px; background: transparent; }
.am-launch .am-paint { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #7287ff; z-index: 0; }
.am-launch .am-paint::after { content: ""; position: absolute; inset: 0; background: #ffb2e3; opacity: 0; transition: opacity 240ms ease; }
.am-launch .am-smoke { position: absolute; width: 110px; height: 100px; right: 42px; top: 34px; opacity: 0; border-radius: 48% 52% 40% 60%; background: radial-gradient(circle at 32% 26%,#ffe0f3 0 27%,transparent 28%),radial-gradient(circle at 72% 38%,#ffc4e9 0 30%,transparent 31%),radial-gradient(circle at 44% 65%,#ffb2e3 0 48%,transparent 49%); transform: translate(15px,5px) scale(.15); transition: opacity 180ms ease, transform 0s 180ms; }
.am-launch .am-smoke-two { right: 68px; top: 25px; }
.am-launch .am-smoke-three { right: 20px; top: 32px; }
.am-launch .am-flight { position: absolute; inset: -110px -24px -12px; overflow: hidden; pointer-events: none; z-index: 2; }
.am-launch .am-rocket { display: block; position: absolute; right: 48px; bottom: 22px; width: 62px; height: 96px; transform: rotate(35deg); opacity: 1; transition: opacity 180ms ease, transform 0s 180ms; }
.am-launch .am-rocket svg { display: block; width: 100%; height: 100%; overflow: visible; }
.am-launch .am-flame { opacity: 0; transform-origin: 40px 83px; transition: opacity 100ms ease; }
.am-launch .am-label { position: relative; transform: translateX(-28px); transition: opacity 160ms ease, transform 280ms var(--ease); }
.am-launch .am-message { position: absolute; left: 30px; opacity: 0; transform: translateY(12px); transition: opacity 160ms ease, transform 280ms var(--ease); }
@keyframes am-rocket-exhaust { from { transform: scaleY(.8); } to { transform: scaleY(1.15); } }

@media (prefers-reduced-motion: no-preference) {
:is(.am-launch:hover, .am-trigger:hover .am-launch) .am-flame { opacity: 1; animation: am-rocket-exhaust 140ms ease-in-out 6 alternate; }
:is(.am-launch:hover, .am-trigger:hover .am-launch) .am-rocket { transform: translate(96px,-135px) rotate(35deg) scale(.3); opacity: 0; transition: transform 700ms linear, opacity 160ms linear 360ms; }
:is(.am-launch:hover, .am-trigger:hover .am-launch) .am-smoke { opacity: 1; transform: translate(-75px,0) scale(3.2); transition: transform 1100ms var(--ease) 100ms, opacity 180ms ease 100ms; }
:is(.am-launch:hover, .am-trigger:hover .am-launch) .am-smoke-two { transform: translate(-40px,-30px) scale(3); transition-delay: 230ms; }
:is(.am-launch:hover, .am-trigger:hover .am-launch) .am-smoke-three { transform: translate(25px,-15px) scale(3); transition-delay: 340ms; }
:is(.am-launch:hover, .am-trigger:hover .am-launch) .am-paint::after { opacity: 1; transition: opacity 450ms ease 600ms; }
:is(.am-launch:hover, .am-trigger:hover .am-launch) .am-label { opacity: 0; transform: translate(-28px,-10px); transition-delay: 160ms; }
:is(.am-launch:hover, .am-trigger:hover .am-launch) .am-message { opacity: 1; transform: translateY(0); transition-delay: 500ms; }
.am-launch:active .am-flame { opacity: 1; animation: am-rocket-exhaust 140ms ease-in-out 6 alternate; }
.am-launch:active .am-rocket { transform: translate(96px,-135px) rotate(35deg) scale(.3); opacity: 0; transition: transform 700ms linear, opacity 160ms linear 360ms; }
.am-launch:active .am-smoke { opacity: 1; transform: translate(-75px,0) scale(3.2); transition: transform 1100ms var(--ease) 100ms, opacity 180ms ease 100ms; }
.am-launch:active .am-smoke-two { transform: translate(-40px,-30px) scale(3); transition-delay: 230ms; }
.am-launch:active .am-smoke-three { transform: translate(25px,-15px) scale(3); transition-delay: 340ms; }
.am-launch:active .am-paint::after { opacity: 1; transition: opacity 450ms ease 600ms; }
.am-launch:active .am-label { opacity: 0; transform: translate(-28px,-10px); transition-delay: 160ms; }
.am-launch:active .am-message { opacity: 1; transform: translateY(0); transition-delay: 500ms; }
}
@media (prefers-reduced-motion: reduce) { .am-launch *, .am-launch *::after { animation: none !important; transition: none !important; } .am-launch .am-flame { display: none; } }
</style>

14

Orbit ring

ORBIT / DRAW

Hover to play · Click for details

The mint outline draws first. A second pink line follows, offset slightly to the right, forming a double orbit.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-ring" aria-label="Let’s go"><svg class="am-orbit" viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="50" r="47" transform="rotate(-90 50 50)" /><circle class="am-orbit-pink" cx="58" cy="50" r="47" transform="rotate(-90 58 50)" /></svg><span class="am-center-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="30" height="30" focusable="false"><path d="M6 18L18 6M6 6H18V18" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="am-label">Let’s go</span></button>
</span>

<style>
/* Quelle / Source: anitamostofa.com — CSS Button Lab */
.am-trigger { display: inline-grid; place-items: center; padding: 24px; max-width: 100%; box-sizing: border-box; }
.am-fx.am-fx {
  --ink: #181818; --pink: #FE7DDA; --mint: #85E8B9;
  --ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem; min-height: 64px; max-width: 100%; box-sizing: border-box;
  padding: 1rem 2rem; margin: 0; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--pink); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.4;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform 280ms var(--ease);
}

.am-fx:focus-visible { outline: 3px solid #7287ff; outline-offset: 8px; }
.am-fx > span { position: relative; z-index: 1; }


/* Orbit ring */
.am-fx.am-ring { width: 130px; height: 130px; padding: 12px; border-radius: 50%; background: #110728; color: #fff; border-color: #7287ff; flex-direction: column; gap: .3rem; font-size: .9rem; }
.am-ring .am-orbit { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); overflow: visible; pointer-events: none; }
.am-ring circle { fill: none; stroke: #85e8b9; stroke-width: 2; stroke-dasharray: 296; stroke-dashoffset: 296; transition: stroke-dashoffset 280ms var(--ease); }
.am-ring .am-center-icon { display: grid; place-items: center; width: 30px; height: 30px; transition: transform 280ms var(--ease); }
@media (prefers-reduced-motion: no-preference) {
:is(.am-ring:hover, .am-trigger:hover .am-ring) circle { stroke-dashoffset: 0; }
:is(.am-ring:hover, .am-trigger:hover .am-ring) .am-center-icon { transform: translate(3px,-3px); }
}
.am-ring:active circle { stroke-dashoffset: 0; }
.am-ring:active .am-center-icon { transform: translate(3px,-3px); }
@media (prefers-reduced-motion: reduce) { .am-fx, .am-fx *, .am-fx::before, .am-fx::after { transition: none !important; animation: none !important; } }

.am-ring circle.am-orbit-pink { stroke: #fe7dda; transition-delay: 140ms; }

.am-ring .am-center-icon svg { display: block; width: 30px; height: 30px; }
</style>

Add a CSS button animation in three steps

Copy an example. Place its button markup where the action belongs on your page.
Move the rules inside the style tag into your stylesheet. When copying several effects, include the shared .am-fx base and reduced-motion rules only once.
Adapt the label and colours, then connect your real action. Use a button for actions and an anchor with an href for navigation. Test keyboard, touch and both colour modes.

Match the movement to your visual identity

Rounded shapes, pink and mint make these examples feel playful. A restrained brand might choose the moving arrow alone. Pick one consistent motion style for your primary buttons instead of assigning every button a different trick. Keep labels concrete: “View project” says more than “Click here”.

The snippets define their own accent and text colours so they work outside this website. Replace those values with your brand tokens. A CSS demo is a starting point: your typography, spacing and surrounding layout determine how the final button feels.

Keep buttons usable with and without motion

The examples animate transforms rather than layout dimensions. Each demo uses a stable hover area, including in embedded browsers that report no hover capability. A separate focus outline makes keyboard navigation visible, while the duplicate rolling label is hidden from screen readers. Reduced-motion settings disable the movement. Check the final colours and behaviour in your own site before using a snippet in production.

More ideas for your website: CSS animations in web design (German) and creative letter styles (German).

Button interactions that fit your brand

I design websites with clear user journeys and thoughtful interactions that reflect your visual identity. Let’s turn your idea into a coherent website.

CSS button effects: frequently asked questions

No. All 14 effects use HTML and CSS. JavaScript on this page handles copying and expanding the explanations. The hover animations themselves need no JavaScript.

Copy the HTML and CSS, add the button to your page and move the CSS rules into your stylesheet. In WordPress, a Custom HTML block and your theme’s additional CSS can work, provided your editor allows that markup and styling.

Touchscreens have no reliable hover state. The examples also use :active for touch feedback. The button should remain recognisable and usable without any animation.

Change --pink, --mint and --ink in the copied CSS. For the rising fill, change the mint layer too. Check text contrast in both the default and active states.

The snippets respect prefers-reduced-motion and turn off movement and transitions when that preference is enabled. The visible keyboard focus remains available.