Switch Button CSS

gistfile1.haml

.switch-button
  .switch-button__button.is-active Type A
  .switch-button__button Type B
  .switch-button__button Type C

gistfile2.sass

.switch-button {
  font-size: 0;
}

.switch-button__button {
  display: inline-block;
  border: 1px solid rgba(0,0,0,.3);
  border-right: 0;
  background-color: #fff;
  padding: $padding-xxxsmall $padding-large;
  text-decoration: none;
  color: #888;
  font-size: $font-size-medium;

  &:first-child {
    border-top-left-radius: 999em;
    border-bottom-left-radius: 999em;
    padding-left: $padding-xxlarge;
  }

  &:last-child {
    border-right: 1px solid rgba(0,0,0,.3);
    border-top-right-radius: 999em;
    border-bottom-right-radius: 999em;
    padding-right: $padding-xxlarge;
  }

  &.is-active {
    border: 1px solid #57ad68;
    background-color: #57ad68;
    color: #fff;
  }

  &.is-active + & {
    border-left: 0;
  }
}

switch-button.png