<center>
  <div class="container">
    <div class="columns">
      <div class="column is-12">
        <div class="up-in-toggle">
          <input type="radio" id="switch_left" name="switch_2" value="yes" />
          <label for="switch_left">Sign In</label>
          <input type="radio" id="switch_right" name="switch_2" value="no" checked/>
          <label for="switch_right">Sign Up</label>
        </div>
      </div>
    </div>
  </div>
</center>

@import url("https://fonts.googleapis.com/css?family=Quicksand");
html {
  height: 100vh;
  background: rgb(32, 45, 61);
  background: linear-gradient(
    0deg,
    rgba(32, 45, 61, 1) 0%,
    rgba(56, 75, 99, 1) 100%
  );
}
.test {
  outline: 1px solid red;
}
.up-in-toggle {
  padding: 5%;
  input {
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
    &:checked + label {
      background: rgb(62, 193, 182);
      background: linear-gradient(
        0deg,
        rgba(62, 193, 182, 1) 0%,
        rgba(98, 227, 204, 1) 100%
      );
      color: white;
      font-weight: 500;
      box-shadow: 0 7px 20px rgba(0, 0, 0, 0.09), 0 6px 6px rgba(0, 0, 0, 0.13);
    }
  }
  label {
    display: inline-block;
    width: 60px;
    background-color: rgb(73, 90, 111);
    color: rgb(165, 173, 183);
    text-align: center;
    font-family: "Quicksand", sans-serif;
    font-size: 0.8rem;
    padding: 6px 6px;
    float: left;
    transition: all 0.1s ease-in-out;
    &:hover {
      cursor: pointer;
    }
  }
}

.up-in-toggle label:first-of-type {
  border-radius: 15.5px 0 0 15.5px;
}

.up-in-toggle label:last-of-type {
  border-radius: 0 15.5px 15.5px 0;
}