Design for AI

Share fan-out hover

Share fan-out hover: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A dark #0f172a "Share" pill that, on hover or keyboard focus within, fans out three 38px grey circular icon buttons to its right (max-width transition from 0 to 200px, 350ms) using unicode glyphs for link, envelope and a QR-ish square. Circles hover #e2e8f0, active #cbd5e1. Main pill hover #1e293b. Focus 2px dark outlines. No brand logos.

Same shelf