radio инпут в виде кнопок.

by Denis Tverdokhlebov

HTML

<div class="radio_buttons switch_body">
  <div>
    <input type="radio" name="option" id="radio1" checked />
    <label for="radio1">Buy</label>
  </div>
  <div>
    <input type="radio" name="option" id="radio2" />
    <label for="radio2">Sell</label>
  </div>
</div>

CSS

.switch_wrapp .radio_buttons {
  margin: 20px;
  font: 14px Tahoma;
  position: relative;
}

.switch_wrapp .radio_buttons div {
  float: left;
}

.switch_wrapp .radio_buttons input {
  position: absolute;
  left: -9999px;
}

.switch_wrapp .radio_buttons label {
  display: block;
  margin: 0 0 0 -1px;
  padding: 8px 10px;
  border: 1px solid #BBBBBB;
  background: #ebebeb;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
  cursor: pointer;
  color: #525252;
  font-size: 18px;
  border-radius: 15px;
  z-index: 222;
/*   top:0;
  left:0;
  position: absolute; */
}

.switch_wrapp .radio_buttons input:checked+label {
  background: #2f2683;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .2);
  color: #ffffff;
  border-radius: 15px;
  width: 140px !important;
  z-index: 333;
}

.switch_wrapp .radio_buttons div:first-child label {
  margin-left: 0;
  width: 140px;
  text-align: center;
  top:0;
  left:0;
  position: absolute;
}

.switch_wrapp .radio_buttons div:last-child label {
  width: 140px;
  text-align: center;
  top:0;
  left:130px;
  position: absolute;
}