Design for AI

Compartir en abanico

Compartir en abanico: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Una píldora oscura #0f172a "Share" que, en hover o con focus de teclado dentro, despliega en abanico tres botones de icono circulares grises de 38px a su derecha (transición de max-width de 0 a 200px, 350ms) usando glifos unicode para enlace, sobre y un cuadrado tipo QR. Los círculos pasan a #e2e8f0 en hover, active #cbd5e1. Hover de la píldora principal #1e293b. Focus con outlines oscuros de 2px. Sin logos de marcas.

Misma estantería