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.html
and a css file style.css
only.
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
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);
}
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)