# Aba deslizante (B 088)

Categoria: Botões  
Tags: toggle, two-option, radio, segmented, slider  
Página: https://designforai.dev/pt/snippet/btn-088

## Prompt

Um seletor deslizante de duas opções (Monthly / Yearly) feito com inputs radio: uma trilha em pílula cinza #e5e7eb com padding de 4px, dois rótulos iguais em 13px semibold cinza #4b5563 e um cursor branco em pílula com sombra pequena que desliza até ficar sob a opção marcada (250ms). O rótulo marcado fica #111827. O foco mostra um outline escuro de 2px dentro do rótulo.

## HTML

```html
<div class="btn-088"><input type="radio" name="b088" id="b088a" checked><label for="b088a">Monthly</label><input type="radio" name="b088" id="b088b"><label for="b088b">Yearly</label><span></span></div>
```

## CSS

```css
.btn-088 {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  background: #e5e7eb;
  border-radius: 999px;
  padding: 4px;
  isolation: isolate
}
.btn-088 input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0
}
.btn-088 label {
  position: relative;
  z-index: 1;
  font: 600 13px/1 system-ui,sans-serif;
  color: #4b5563;
  text-align: center;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s
}
.btn-088 span {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: transform .25s
}
.btn-088 input:nth-of-type(1):checked~span {
  transform: translateX(0)
}
.btn-088 input:nth-of-type(2):checked~span {
  transform: translateX(100%)
}
.btn-088 input:checked+label {
  color: #111827
}
.btn-088 label:hover {
  color: #111827
}
.btn-088 input:focus-visible+label {
  outline: 2px solid #111827;
  outline-offset: -2px
}
.btn-088 label:active {
  color: #000
}
```