Design for AI

Segmentado triple

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

groupsegmentedradiothree-options

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

Un control segmentado de tres opciones (Day / Week / Month) construido con inputs radio: una pista #f3f4f6 con borde de 1px #e5e7eb, radio de 8px, 3px de padding interior y separaciones de 2px; cada etiqueta es de 13px semibold gris #6b7280 con padding de 8px por 14px y radio de 6px. La opción marcada recibe fondo blanco, texto oscuro y una sombra 0 1px 2px. Al pasar el cursor el texto se oscurece; active #e5e7eb. Outline de foco de 2px oscuro dentro de la etiqueta.

Misma estantería