Teilen-Reihe geteilt
Teilen-Reihe geteilt: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
CSS
.btn-188 {
display: inline-flex;
border: 1px solid #d1d5db;
border-radius: 10px;
overflow: hidden;
background: #fff
}
.btn-188 button {
display: grid;
place-items: center;
font: 600 14px/1 system-ui,sans-serif;
color: #111827;
background: transparent;
border: 0;
border-left: 1px solid #e5e7eb;
padding: 0 14px;
height: 40px;
cursor: pointer;
transition: background .15s,color .15s
}
.btn-188 button:first-child {
border-left: 0;
padding: 0 18px
}
.btn-188 button:hover {
background: #f3f4f6
}
.btn-188 button:focus-visible {
outline: 2px solid #111827;
outline-offset: -3px
}
.btn-188 button:active {
background: #111827;
color: #fff
}
HTML
<div class="btn-188"><button>Share</button><button aria-label="Copy link"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg></button><button aria-label="Email"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18v12H3zM3 6l9 7 9-7"/></svg></button></div>Prompt
Eine Teilen-Button-Reihe: ein einzelner Container mit 10px Radius und 1px #d1d5db Rahmen, der ein Text-Segment "Share" und zwei Icon-Segmente (Kettenglied, Briefumschlag) hält, getrennt durch 1px #e5e7eb Trennlinien, 40px hoch, weiß. Jedes Segment hovert #f3f4f6 und wird bei Active dunkel #111827 mit weißem Inhalt. Focus ist eine 2px inset Outline auf dem Segment. Keine Marken-Logos.