Sliding Radio Button in HTML CSS

This code implements a Sliding Radio Button in HTML and CSS. It creates a user-friendly interface for selecting options with sliding animations. The sliding effect occurs when you activate or deactivate certain options, enhancing the user experience.

You can use this code in web forms and applications to improve user interaction. It enhances user experience by providing a visually engaging way to select options.

How to Create Sliding Radio Button in HTML CSS

1. First of all, load the Reset CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

2. Create the HTML structure for your sliding radio buttons. Use the following HTML code as a template. You can customize the fieldsets and labels to match your specific options.

<form action="">
  <fieldset>
    <legend>High contrasts</legend>
    <div class="radio-block">
       <input type="radio" name="contrasts" id="contrasts-on" checked>
      <label for="contrasts-on">Activated</label>
      <input type="radio" name="contrasts" id="contrasts-off">
      <label for="contrasts-off" class="off-label">Disabled</label>
      <span class="selected" aria-hidden="true"></span>
    </div>
  </fieldset>
  <fieldset>
    <legend>Animation effects</legend>
    <div class="radio-block">
      <input type="radio" name="animations" id="animations-on" checked>
      <label for="animations-on">Activated</label>
      <input type="radio" name="animations" id="animations-off">
      <label for="animations-off" class="off-label">Disabled</label>
      <span class="selected" aria-hidden="true"></span>
    </div>
  </fieldset>
</form>

3. Apply CSS styles to the HTML elements to achieve the sliding effect and overall appearance. The following CSS code defines the styles for the sliding radio buttons. Customize the colors, fonts, and sizes as per your design preferences.

@import url("https://fonts.googleapis.com/css?family=Montserrat:500");
form {
  padding: 40px !important;
  border-radius: 10px;
  background-color: #FFF;
}

fieldset:not(:last-child) {
  padding-bottom: 18px;
}

legend {
  padding-bottom: 8px;
  text-transform: uppercase;
}

.radio-block {
  position: relative;
  display: flex;
  min-width: 280px;
  border: dashed var(--blue) 1px;
  border-radius: 20px;
  background-color: #F7F5F3;
  margin-top: 10px;
}

.selected {
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(50% - 1px);
  height: calc(100% - 2px);
  border-radius: 20px;
  transition: transform 0.2s;
  background-color: var(--blue);
}

label {
  position: relative;
  z-index: 100;
  width: 50%;
  padding: 18px !important;
  transition: color 0.2s;
  text-align: center;
  cursor: pointer;
}

input[type=radio]:checked + label {
  color: #FFF;
}

input[type=radio]:checked + .off-label + .selected {
  transform: translateX(100%);
}

/* ------ general style ------ */
:root {
  --blue: #104fa8;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Montserrat";
  color: var(--blue);
  background-color: var(--blue) !important;
}

.sr-only, input[type=radio] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

You can customize the sliding effect’s speed by adjusting the transition property’s duration in the .selected class. Furthermore, you can change the colors, fonts, and sizes to match your website’s design.

That’s it! hopefully, you have successfully created Sliding Radio Buttons. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.