Button radio group

Button radio group

by Csaba Hellinger

HTML

<fieldset class="radio-buttons">
  <legend>Filter the list</legend>
  <label>
    <input type="radio" name="filter" value="all" checked />
    All
  </label>
  <label>
    <input type="radio" name="filter" value="even" />
    Even
  </label>
  <label>
    <input type="radio" name="filter" value="odd" />
    Odd
  </label>
</fieldset>

CSS

.radio-buttons {
  display: flex;
  gap: 1rem;
  border-radius: 0.4rem;
  border-style: solid;
  border-color: #fff2;
  color: #fff2;
  padding: 1rem;
  user-select: none;
    
  & label {
    display: flex;
    justify-content: center;
    background: white;
    color: black;
    padding: 0.3rem 0.5rem;
    min-width: 3rem;
    border-radius: 0.2rem;
    cursor: pointer;
    box-shadow: 0 0 0.8rem #0007;
    transition-property: box-shadow, scale;
    transition-duration: 100ms;
    transition-timing-function: ease;
  }
  
  & label:has(input:checked) {
    background: steelblue;
    color: white;
    pointer-events: none;
    box-shadow: 0 0 0.3rem #0009;
    scale: 0.98;
  }
  
  & input[type="radio"] {
    appearance: none;
    margin: 0;
  }
}

/* ------------------- */

html, body { background: #444; color: #ddd; font-family: sans-serif; }