Design for AI

Compartilhar em leque

Compartilhar em leque: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Uma pílula escura #0f172a "Share" que, no hover ou com focus de teclado dentro dela, abre em leque à direita três botões circulares cinza de 38px com ícones (transição de max-width de 0 a 200px, 350ms) usando glifos unicode para link, envelope e um quadrado estilo QR. Os círculos ficam #e2e8f0 no hover, #cbd5e1 no active. Hover da pílula principal #1e293b. Focus com outlines escuros de 2px. Sem logos de marcas.

Mesma prateleira