Sliding Radio Button in HTML CSS

Sliding Radio Button in HTML CSS
Code Snippet:Sliding radio buttons CSS
Author: Katia Moreira
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 1,467
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X