Design for AI

Segmented dreifach

Segmented dreifach: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein Segmented Control mit drei Optionen (Day / Week / Month) aus Radio-Inputs: eine #f3f4f6 Schiene mit 1px Rahmen #e5e7eb, 8px Radius, 3px innerem Padding und 2px Lücken; jedes Label ist 13px semibold Grau #6b7280 mit 8px mal 14px Padding und 6px Radius. Die gewählte Option bekommt weißen Hintergrund, dunklen Text und einen Schatten 0 1px 2px. Hover dunkelt den Text; active #e5e7eb. Fokus-Outline 2px Dunkel innerhalb des Labels.

Gleiches Regal