<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<section id="first" class="section">
    <div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Кофе</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-2">
      <label for="radio-2"><span class="radio">Чай</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-3">
      <label for="radio-3"><span class="radio">Сок</span></label>
    </div>
</section>
<section id="second" class="section">
    <div class="container">
      <input type="checkbox" name="group2" id="checkbox-1">
      <label for="checkbox-1"><span class="checkbox">Апельсины</span></label>
    </div>
    <div class="container">
      <input type="checkbox" name="group2" id="checkbox-2">
      <label for="checkbox-2"><span class="checkbox">Яблоки</span></label>
    </div>
    <div class="container">
      <input type="checkbox" name="group2" id="checkbox-3">
      <label for="checkbox-3"><span class="checkbox">Авокадо</span></label>
    </div>
</section>
body {
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  color: #fff;
}
#first {
  background-color: #4B4D65;
}
#second {
  background-color: #FF8A66;
}
.section {
  padding: 100px;
  padding-left: 150px;
}
.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;
}
.container {
  margin-bottom: 10px;
}
.container label {
  position: relative;
}

/* Base styles for spans */
.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* Radio buttons */
.container span.radio:hover {
  cursor: pointer;
}
.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}
.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}

/* Check-boxes */
.container span.checkbox::before {
  width: 27px;
  height: 27px;
  background-color: #fff;
  left: -35px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border-color .2s;
}
.container span.checkbox:hover::before {
  border: 3px solid #F0FF76;
}
.container span.checkbox::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -31px;
  top: 2px;
  color: transparent;
  transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {
  color: #62AFFF;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.