Beautiful Sliding Radio Buttons Group

Written by @kerixa 9 March 2021

When we want the user to select only one item out of several items, we use a group of radio buttons that are connected and can not be selected at the same time. In the following code, beautiful and stylish sliding radio buttons were included. By selecting each radio button, the background color of the radio button changes to green.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
/** For prettyiness **/
 body {
     font-family: sans-serif;
     margin-top: 50px;
}
/** vars **/
 :root {
     --padding: 2px;
     --radius: 5px;
     --height: 20px;
     --width: 100px;
     --on-color-bg: #22dd55;
     --off-color-bg: lightgray;
     --on-color-fg: dimgrey;
     --off-color-fg: var(--on-color-fg);
}
/** Main slider CSS **/
 .slider-checkbox {
     position: relative;
     width: 50%;
     margin: 0 auto 0.5rem auto;
}
 @media only screen and (max-width: 800px) {
     .slider-checkbox {
         flex-direction: row;
         width: 90%;
    }
}
 .slider-checkbox input {
     display: none;
}
 .slider-checkbox input:checked + label:after {
     left: calc(50% + calc(var(--width) / 2));
     background: var(--on-color-fg);
}
 .slider-checkbox input:checked + label:before {
     background: var(--on-color-bg);
}
 .slider-checkbox label {
     cursor: pointer;
}
 .slider-checkbox label:hover {
     color: #888;
}
 .slider-checkbox label:before, .slider-checkbox label:after {
     position: absolute;
     display: inline-block;
     content: "";
     left: calc(50% - var(--padding));
     border-radius: var(--radius);
}
 .slider-checkbox label:before {
     background: var(--off-color-bg);
     width: var(--width);
     z-index: 1;
     height: var(--height);
     transition: all 250ms;
}
 .slider-checkbox label:after {
     width: calc(var(--width) /2 - var(--padding) *2);
     background: var(--off-color-fg);
     z-index: 2;
     transition: all 200ms;
     height: calc(var(--height) - var(--padding) * 2);
     top: var(--padding);
     left: calc(50% + var(--padding));
}

</style>
<div class="slider-checkbox">
    <input id="option-1" type="radio" value="1" name="options">
    <label for="option-1">
        First option
    </label>
</div>
<div class="slider-checkbox">
    <input id="option-2" type="radio" value="1" name="options">
    <label for="option-2">
        Second option
    </label>
</div>
<div class="slider-checkbox">
    <input id="option-3" type="radio" value="1" name="options">
    <label for="option-3">
        Third option
    </label>
</div>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300