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>
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;
}
Note: I have used the
OutfitGoogle 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);
}
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);
}
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)