DEV Community

Cover image for Creating Super Radio Buttons
Mohit Maroliya
Mohit Maroliya

Posted on

Creating Super Radio Buttons

In the last post , I had shared to create SuperLike, SuperShare and SuperSubscribe buttons.

In this post, I will show how to create a cool html-css radio button that represents the feeling of animated radio-button.

For this we require a html file index.htmland a css file style.cssonly.

The end result for Radio-button is like this:

Setting up the input structure

Lets get started by setting up the basic structure in index.html file. We had used <input/> of type radio here which we wrap in main_wrapper class.

So for our index.html file, all we need is the following code:

<body>
    <div class="main_wrapper">
      <div class="buttons_wrapper">

        <input type="radio" id="radio1" name="inputs" />
        <label class="entry" for="radio1">
          <div class="circle"></div>
          <div class="entry-label">Yes</div>
        </label>

        <input type="radio" id="radio2" name="inputs" />
        <label class="entry" for="radio2">
          <div class="circle"></div>
          <div class="entry-label">No</div>
        </label>

        <input type="radio" id="radio3" name="inputs" />
        <label class="entry" for="radio3">
          <div class="circle"></div>
          <div class="entry-label">May Be</div>
        </label>

        <div class="highlight"></div>
      </div>
    </div>
  </body>
Enter fullscreen mode Exit fullscreen mode

Since, we have defined the ids and classes for the html components, so now its time to add some styling and animations to them. 😄

Adding the Styles

We first add styling to main_wrapper and buttons_wrapper classes, label of radioButton and the circle in front of each option.


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Outfit", sans-serif;
  font-size: 28px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f7f7f7;
  color: #cacaca;
}

.main_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 260px;
  padding: 50px;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.82);
  border-radius: 20px;
  position: relative;
}

.buttons_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  width: 160px;
  overflow: hidden;
  position: relative;
}

.entry {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 10px;
  width: 100%;
  position: relative;
  transition: 0.5s;
}

.circle {
  height: 32px;
  width: 32px;
  top: 50%;
  border: 3px solid #cacaca;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.5s;
}

.entry-label {
  font-weight: 700;
  padding-left: 15px;
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
}
Enter fullscreen mode Exit fullscreen mode

Note: I have used the Outfit Google Font. You can import the font by writing the following code on top of the CSS file.
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200&display=swap");

Now I will add some styling to the highlight class that will appear when an input is selected.

.highlight {
  height: 18px;
  width: 18px;
  top: 19px;
  left: 7px;
  position: absolute;
  border-radius: 59%;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateY(-55px);
}
Enter fullscreen mode Exit fullscreen mode

And finally add the styling and animation to the input options

input {
  display: none;
}

input:nth-child(1):checked ~ .highlight {
  transform: translateY(0);
  background: green;
}

input:nth-child(3):checked ~ .highlight {
  transform: translateY(55px);
  background:red;
}

input:nth-child(5):checked ~ .highlight {
  transform: translateY(110px);
  background: blue;
}
input:nth-child(1):checked + .entry .circle {
  border-color: #056b16;
  color: #056b16;
}
input:nth-child(3):checked + .entry .circle {
  border-color: rgb(160, 2, 2);
  color: rgb(160, 2, 2);
}
input:nth-child(5):checked + .entry .circle {
  border-color: rgb(0, 0, 185);
  color: rgb(0, 0, 185);
}
input:nth-child(1):checked + .entry {
  color: #056b16;
}
input:nth-child(3):checked + .entry {
  color: rgb(160, 2, 2);
}
input:nth-child(5):checked + .entry {
  color: rgb(0, 0, 185);
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

Cheers! 🍻, you have build the SuperRadio button.

Now you can come up with as many stylings and make this small application more fantastic.

Thank you for your time. Please share your valuable feedbacks in comments also.

☘️ Happy Coding & Happy New Year 2k22 ☘️

Top comments (0)