<div class="vert">
  <div class="sr_align">  
    <h1>Try Me</h1>
    <div class="sr_checkbox">
      <label>
        <input type="checkbox" class="sr_acceptance" name="acceptance" value="Y" required="">
            <span class="sr_element">
                  <span class="srone">
                        <span class="sr_element_two">
                        </span>
                   </span>
            </span>
      </label>
    </div>   
  </div>
</div>

.vert * {
  outline:none;
  font-weight:bold;
  letter-spacing:-1.2px;
  font-family:sans-serif;
}
.vert {
  display: table;
  height: 100vh;
  width: 100%;
}
.vert h1 {
    font-size: 10vw;
    letter-spacing: -3px !important;
    margin: 10px 0 30px;
}
.sr_align {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
  top: -20px;
}
.sr_checkbox label {
  cursor: pointer;
  margin-left:-30px;
  display: inline-block;
  padding-left: 44px;
  position: relative;
  font-size: 14px;
}
.sr_checkbox label input {
  display: none !important;
}
.sr_checkbox label .sr_element:before {
    content: "7";
    display: block;
    position: absolute;
    font-size: 36px;
    z-index: 1;
    top: 33px;
    left: 97px;
    color: #000;
}

.sr_checkbox label .srone:before {
    content: '$';
    position: absolute;
    font-size: 36px;
    z-index: 1;
    top: 33px;
    left: 78px;
    color: #60f;
}
.sr_checkbox label input[type="checkbox"]:checked+.sr_element .srone:before {
  content: "";
}
.sr_checkbox label .sr_element_two:before {
  content: "Pay";
  color:white;
  display: block;
  position: absolute;
  font-size: 38px;
  z-index: 2;
  top: 31px;
  left: 148px !important;
}
.sr_checkbox label input[type="checkbox"]:checked+.sr_element .sr_element_two:before {
    content: "Ok";
    color: black;
    display: block;
    position: absolute;
    font-size: 42px;
    z-index: 2;
    top: 28px;
    left: 78px !important;
    transition: 0.1s;
}
.sr_checkbox label .sr_element:after {
  content: "";
  width: 70px;
  height: 70px;
  border-radius: 100%;
  background: white;
  display: block;
  padding: 0;
  margin: 3px;
  -webkit-transition: -webkit-transform;
  transition: -webkit-transform;
  transition: transform;
  transition: transform, -webkit-transform;
  -webkit-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-timing-function: cubic-bezier(0.23, 1.94, 0.38, 0.74);
  transition-timing-function: cubic-bezier(0.23, 1.94, 0.38, 0.74);
  position: relative;
  top: 8px;
  left: 9px;
}
.sr_checkbox label .sr_element {
  display: inline-block;
  border-width: 0;
  padding: 0;
  font-size: 0;
  min-width: 188px;
  height: 91px;
  border-radius: 80px;
  background: #60f;
  vertical-align: bottom;
  margin-right: 10px;
  -webkit-transition: background;
  transition: background;
  box-shadow: 0 0 0 7px #6600ff25 !important;
  border:7px solid #00000020;
}
.sr_checkbox label input[type="checkbox"]:checked+.sr_element:after {
  -webkit-transform: translateX(91px);
  transform: translateX(91px);
  transition: 0.1s;
}
.sr_checkbox label input[type="checkbox"]:checked+.sr_element:before {
    content: "✓";
    right: -40px;
    top: -30px;
    opacity:1;
    color: #60f !important;
    font-size: 96px;
}
.sr_checkbox label input[type="checkbox"]:checked+.sr_element {
  background: #0f9;
  box-shadow: 0 0 0 7px #00ff9935 !important;
}
.sr_checkbox {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

//* Created by Chris Seifert
//* https://portseif.io