CSS Button-Effekte: 14 Animationen zum Ausprobieren und Kopieren

Am Anfang liegen alle drei Formen bündig übereinander. Erst beim Hover hebt sich die mintfarbene Hauptfläche und die pinken und violetten Farbschatten fächern sich nach hinten auf – wie zwei versetzte Scheinwerfer.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-lift" aria-label="Abheben"><span class="am-label">Abheben</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>

Der schwarze Kreis sitzt zuerst links. Beim Hover rollt er quer durch den gefüllten Button nach rechts, während die Beschriftung nach links gleitet.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-arrow" aria-label="Weiterdenken"><span class="am-label">Weiterdenken</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>

Aus „Neugierig?“ wird „Dann los!“. Der alte Text rollt nach oben und eine neue Zeile samt Stern kommt nach.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-roll" aria-label="Neugierig?"><span class="am-window" aria-hidden="true"><span class="am-track"><span>Neugierig?</span><span>Dann los! →</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>

Beim Hover sinkt die glänzende Fläche nach unten, bis die dicke Schattenkante verschwindet. Beim Klicken gibt die Taste noch einen kleinen Druckimpuls. Lichtstreifen und Stern bewegen sich mit.

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>

Zwei mintfarbene Wellen steigen langsam und zeitversetzt hinter dem Text auf. Die Füllung dauert rund 1,9 Sekunden, damit ihre Bewegung gut sichtbar bleibt. Der Pfeil dreht sich ruhig mit.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-wave" aria-label="Eintauchen"><span class="am-label">Eintauchen</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>

Die dunkle Unterseite bleibt fest stehen. Beim Hover fährt nur die mintfarbene Hauptfläche nach unten und überdeckt die Seitenwand; beim Drücken schließt sie ganz.

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>

Fünf weich gerundete, gezeichnete Herzen fächern sich beim Hover auf. Sanfte Farbverläufe, Lichtreflexe und eine schmale Unterkante geben ihnen Volumen.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-hearts" aria-label="Mit Liebe"><span class="am-label">Mit Liebe</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>

Zuerst leuchtet die pinke Kontur wie eine Neonröhre auf. Danach breitet sich das farbige Licht verzögert von links im Inneren aus.

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>

Die Vorderseite klappt nach hinten weg. Auf der zweiten Fläche wartet „Let’s talk“ – eine echte räumliche Drehung.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-flip" aria-label="Eine Idee?"><span class="am-cube" aria-hidden="true"><span class="am-face">Eine Idee?</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>

Zwei dunkle Flächen öffnen sich wie ein Vorhang. Dahinter erscheint die neue Botschaft; rechts oberhalb des Buttons poppen drei kleine Sterne versetzt auf.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-shutters" aria-label="Überraschung"><span class="am-curtain"><span class="am-front" aria-hidden="true">Überraschung</span><span class="am-reveal" aria-hidden="true">Hallo, 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>

Zuerst öffnet sich die Umschlaglasche. Danach fährt die Grußkarte davor heraus und bleibt vollständig lesbar. Beim Verlassen gleitet die Karte zurück, bevor sich der Umschlag schließt.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-fold" aria-label="Brief öffnen"><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">Hallo du!</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">Brief öffnen</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>

Eine leuchtende Linie fährt einmal von oben nach unten über den kantigen Button. Der Text bleibt unverändert lesbar.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-glitch" aria-label="Scan starten"><span class="am-label">Scan starten</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>

Eine gezeichnete Rakete im Emoji-Stil zündet beim Hover und fliegt diagonal davon. Ihr pinker Rauch breitet sich hinter ihr aus und färbt die Buttonfläche. Beim Verlassen kehrt die Vorschau zum Start zurück.

HTML + CSS · anitamostofa.com

<!-- Quelle / Source: anitamostofa.com -->
<span class="am-trigger">
<button type="button" class="am-fx am-launch" aria-label="Bereit?"><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">Bereit?</span><span class="am-message" aria-hidden="true">Abflug!</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>

Zuerst zeichnet sich die mintfarbene Kontur ein. Eine zweite pinke Linie folgt leicht nach rechts versetzt und bildet einen doppelten 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>