# Segmented three-way (B 098)

Category: Buttons  
Tags: group, segmented, radio, three-options  
Page: https://designforai.dev/snippet/btn-098

## Prompt

A three-option segmented control (Day / Week / Month) built from radio inputs: a #f3f4f6 track with 1px #e5e7eb border, 8px radius, 3px inner padding and 2px gaps; each label is 13px semibold grey #6b7280 with 8px by 14px padding and 6px radius. The checked option gets a white background, dark text and a 0 1px 2px shadow. Hover darkens text; active #e5e7eb. Focus outline 2px dark inside the label.

## HTML

```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>
```

## CSS

```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
}
```