<div class="wrapper">  
  <div class="switcher">
    <div class="fieldset">
      <input type="radio" name="group-a" id="view-1" checked>
      <label for="view-1">View</label>
      <input type="radio" name="group-a" id="edit-1">
      <label for="edit-1">Edit</label>
      <span class="switch"></span>
    </div>
  </div>
</div>

.switcher {
  text-align: center;
}

.switcher .fieldset {
  display: inline-block;
  position: relative;
  border-radius: 50em;
  border: 2px solid rgba(15,109,149,1);
  padding: 3px;
  background-color: #fff;
}

.switcher input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.switcher label {
  position: relative;
  display: inline-block;
  float: left;
  width: 69px;
  height: 30px;
  line-height: 29px;
  color: #0a4b67;
  text-decoration: none;
  font-weight: normal;
  cursor: pointer;
  z-index: 1;
  transition-delay: .1s;
  transition: 0.3s ease-in;
}

.switcher input[type="radio"]:checked + label {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: .5px;
}

.switcher .switch {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 32px;
  width: 71px;
  border-radius: 50em;
  background-color: #0f6d95;
  transition: transform 0.3s;
}

.switcher input[type="radio"]:checked + label + .switch,
.switcher input[type="radio"]:checked + label:nth-of-type(n) + .switch {
  /* use label:nth-of-type(n) to fix a bug on safari with multiple adjacent-sibling selectors*/
  -webkit-transform: translateX(77px);
      -ms-transform: translateX(77px);
          transform: translateX(69px);
}

body {
  font-family: "Noto Sans",Helvetica,Arial,sans-serif;
  font-size: 15px;
}

p {
  text-align: center;
}

.wrapper {
  margin-top: 50px;
}