Design for AISegmentado triplo
Segmentado triplo: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.
CSS
.btn-098 {
display: inline-flex;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 3px;
gap: 2px
}
.btn-098 input {
position: absolute;
opacity: 0;
width: 0;
height: 0
}
.btn-098 label {
font: 600 13px/1 system-ui,sans-serif;
color: #6b7280;
padding: 8px 14px;
border-radius: 6px;
cursor: pointer;
transition: background .15s,color .15s,box-shadow .15s
}
.btn-098 label:hover {
color: #111827
}
.btn-098 input:checked+label {
background: #fff;
color: #111827;
box-shadow: 0 1px 2px rgba(0,0,0,.12)
}
.btn-098 input:focus-visible+label {
outline: 2px solid #111827;
outline-offset: -2px
}
.btn-098 label:active {
background: #e5e7eb
}
HTML
<div class="btn-098"><input type="radio" name="b098" id="b098a" checked><label for="b098a">Day</label><input type="radio" name="b098" id="b098b"><label for="b098b">Week</label><input type="radio" name="b098" id="b098c"><label for="b098c">Month</label></div>Prompt
Um controle segmentado de três opções (Day / Week / Month) feito com inputs radio: uma trilha #f3f4f6 com borda de 1px #e5e7eb, raio de 8px, padding interno de 3px e gaps de 2px; cada rótulo tem 13px semibold cinza #6b7280 com padding de 8px por 14px e raio de 6px. A opção marcada ganha fundo branco, texto escuro e sombra 0 1px 2px. No hover o texto escurece; active #e5e7eb. Outline de foco de 2px escuro dentro do rótulo.