Design for AI

Teilen aufgefächert

Teilen aufgefächert: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

sharegrouprevealicon-buttonshover-expand

CSS
.btn-189 {
  display: inline-flex;
  align-items: center;
  gap: 6px
}
.btn-189>button {
  font: 600 14px/1 system-ui,sans-serif;
  color: #fff;
  background: #0f172a;
  border: 0;
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  transition: background .15s
}
.btn-189>button:hover {
  background: #1e293b
}
.btn-189>button:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 3px
}
.btn-189>button:active {
  background: #020617
}
.btn-189 span {
  display: inline-flex;
  gap: 6px;
  max-width: 0;
  overflow: hidden;
  transition: max-width .35s ease-out
}
.btn-189:hover span,.btn-189:focus-within span {
  max-width: 200px
}
.btn-189 span button {
  width: 38px;
  height: 38px;
  font-size: 16px;
  color: #0f172a;
  background: #f1f5f9;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s
}
.btn-189 span button:hover {
  background: #e2e8f0
}
.btn-189 span button:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px
}
.btn-189 span button:active {
  background: #cbd5e1
}
HTML
<div class="btn-189"><button>Share</button><span><button aria-label="Copy">&#128279;</button><button aria-label="Email">&#9993;</button><button aria-label="QR">&#9638;</button></span></div>
Prompt

Eine dunkle #0f172a "Share" Pille, die beim Hover oder Tastatur-Focus innerhalb drei 38px graue runde Icon-Buttons nach rechts auffächert (max-width Transition von 0 auf 200px, 350ms), mit Unicode-Glyphen für Link, Briefumschlag und ein QR-artiges Quadrat. Kreise hovern #e2e8f0, Active #cbd5e1. Hauptpille Hover #1e293b. Focus: 2px dunkle Outlines. Keine Marken-Logos.

Gleiches Regal