Custom Radio Buttons

.label1,.label2 {
   display: block;
   height: 180px;
   width: 130px;
   background-size: 130px 180px;
   background:linear-gradient(
	   to bottom,
	   white 0,white 90px,
 	   #2c2c2c 90px, #2c2c2c 180px
	   );
   position: absolute;
   top:0;
   transition: 0.5s;
   color: #2c2c2c;
}
.label2 {
   right: 0;
}
span {
   display: flex;
   height: 90px;
   width: 130px;
   justify-content: center;
   align-items: center;
   font-family: 'Rubik',sans-serif;
   font-weight: 500;
   font-size: 22px;
}
input:checked + label {
   background-position: 0 -90px;
   color: white;
   transition: 1s;
}

</style>

Kilivecode

Code Editor

Custom Radio Buttons | Pure CSS