A Pen by tomasz stryjewski.

index.html

<form>
  <fieldset class="radioset">
    <ul>
      <li><input type="radio" name="radio[]" id="radio1" checked><label for="radio1">foo</label>
      <li><input type="radio" name="radio[]" id="radio2"><label for="radio2">bar</label>
      <li><input type="radio" name="radio[]" id="radio3"><label for="radio3">baz</label>
      <li><input type="radio" name="radio[]" id="radio4"><label for="radio4">qux</label>
    </ul>
  </fieldset>
</form>

pure-css-fancy-radio-group.markdown

pure css fancy radio group

A Pen by tomasz stryjewski on CodePen.

License.

style.scss

@import "compass";
* {
  -webkit-box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background: #eee;
  margin: 2em;
}

.radioset {
  border: 0;
  border-radius: .5em;
  background: #f0f0f0 linear-gradient( #fefefe, #f5f5f5 25%, #f0f0f0 75%, #ddd  );
  box-shadow: 0 3px 15px -5px;
  min-width: 16em;
  max-width: 30em;
  margin: auto;
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 60%;
      left: 12.5%;
      right: 12.5%;
      height: 6px;
      margin-top: -3px;
      background: #CCC;
      box-shadow: inset 0 3px 5px -4px #000, 0 1px #fff;
    }
  }

  li {
    display: inline-block;
    position: relative;
    width: 25%;
  }

  [type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  label {
    line-height: 30px;
    padding-bottom: 40px;
    display: block;
    color: #789;
    text-shadow: 0 1px #fff, 0 -1px #eee;
    font-variant: small-caps;

    &::before,
    &::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 60%;
      border-radius: 50%;
      @include transition( .35s cubic-bezier( 0.175, 0.885, 0.320, 1.275 ) all ); // inspired by Ladda by hakim.se
    }

    &::before {
      width: 14px;
      height: 14px;
      margin: -7px 0 0 -7px;
      border: 0 solid #CCC;
      background: #CCC;
      box-shadow: inset 0 3px 5px -4px #000, 0 2px 1px -1px #fff;
    }

    &::after {
      width: 0;
      height: 0;
      background: #fff;
    }
  }

  :checked {
    + label {
      
      &::before,
      &::after {
        @include transition( .4s cubic-bezier( 1, -1, 0.4, 1.4 ) all );
      }
      
      &::before {
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
      }

      &::after {
        width: 10px;
        height: 10px;
        margin: -5px 0 0 -5px;
        box-shadow: inset 0 -5px 5px -5px #ccc, 0 2px 5px -2px #000;
      }
    }
  }
}