.switch-button {
	 background: #DCDCDC;
	 border-radius: 30px;
	 overflow: hidden;
	 width: 253px;
	 text-align: center;
	 font-size: 18px;
	 color: #333;
	 position: relative;
	 padding-right: 120px;
}
.switch-button:before {
   content: "New Card";
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   width: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 3;
   pointer-events: none;
   font-weight: bolder;
}
.switch-button-checkbox {
   cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   z-index: 2;
}
.switch-button-checkbox:checked + .switch-button-label:before {
   transform: translateX(120px);
   transition: transform 300ms linear;
}
.switch-button-checkbox + .switch-button-label {
   position: relative;
   padding: 10px 0;
   display: block;
   font-weight: bolder;
   user-select: none;
   pointer-events: none;
   margin-bottom: 0;
}
.switch-button-checkbox + .switch-button-label:before {
   content: "";
   background: #fff;
   height: 100%;
   width: 100%;
   position: absolute;
   left: 0;
   top: 0;
   border-radius: 30px;
   transform: translateX(0);
   transition: transform 300ms;
}
.switch-button-checkbox + .switch-button-label .switch-button-label-span {
   position: relative;
}