Custom Radio Buttons | Pure CSS

<div class="container">
   <input type="radio" name="radio" id="opt1">
   <label for="opt1" class="label1">
       <span>YES</span>
   </label>
   <input type="radio" name="radio" id="opt2">
   <label for="opt2" class="label2">
       <span>NO</span>
   </label>
</div>

Centering The Container:

Moving on to CSS, First of all, we need to discard the document’s default padding and the margin; therefore, we set the padding and margin to 0. Next, we set a pleasant off-white color with hex-code #f5f5f5 as a background for our document body. Here we are using flex layout to center our container.

body {
   background-color: #f5f5f5;
   padding: 0;
   margin: 0;
   height:100vh;
   width: 100vw;
   display: flex;
   justify-content: center;
   align-items: center;
}

Styling The Container:

In the next step, we set dimensions for the container as 260*90px. We add a slight box-shadow to the container, so it appears to lift from the surface.

.container {
   background-color: white;
   height: 90px;
   width: 260px;
   position: absolute;
   box-shadow: 0 0 30px 0px #d1d1d1;
   overflow: hidden;
}

Hiding Radio Inputs:

The foremost vital step here would be hiding our default input radio buttons by setting them to display none.

input[type="radio"] {
   display: none;
}

Styling Labels:

We now need to replace these hidden radio buttons with labels. For this, we must set some height and width for labels. While setting those, let us keep in mind the height of our labels should be exactly double that of the container’s height. Also, the width of labels should be exactly half of the width of the container. These labels will now act as our radio buttons.

We set the background-image to a solid linear gradient that consists of two colors: #ffffff and #2c2c2c. The direction of the gradient is set from top to bottom. The background now seems to overflow from the container as the background has double the height of the container. Hence we need to set the overflow property of the container to hidden. The overflown background is no more visible.

We set a 0.5s transition time for the labels to ensure smooth transitions.

.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;
}

Positioning Labels:

Position the ‘No’ option to the right side of the container by setting the right attribute to 0. Here remember that we are using absolute position.

.label2 {
   right: 0;
}

Basic Typography:

Add basic typography styling to both the span elements. Again we use flex to center the contents of span element.

span {
   display: flex;
   height: 90px;
   width: 130px;
   justify-content: center;
   align-items: center;
   font-family: 'Rubik',sans-serif;
   font-weight: 500;
   font-size: 22px;
}

Styling for ‘:checked’ state:

Coming to the Final step, We use ‘input: checked + label’ selector to select the adjacent label element when a user checks an input. So every time the user clicks a label, they actually check the radio button corresponding to the label. We set background-position of labels to shift by 90px towards the top hence bringing the black(#2c2c2c) color of gradient over the checked labels making it look highlighted or selected. The last thing we need to do is set the text color to white.

input:checked + label {
   background-position: 0 -90px;
   color: white;
   transition: 1s;
}