SVG radio button | Design SVG radio button Using HTML CSS | Codewithrandom
Learners, I’m assuming you should have an about what is radio button and why you use it. Hold on I’m not talking about the electronics radio button.
.png "SVG radio button | Design SVG radio button Using HTML CSS | Codewithrandom")
Here Radio button is the inner functionality in HTML we use on the website whenever we have to choose one from two options.
Well, Let me closely explain it have you ever filled any online or offline form there is a section for gender option and you have to select only one from them, So you simply check one option. This is radio button functionality.
In this blog, we are not going to learn how we can design SVG radio buttons although in HTML there is inbuilt functionality of radio buttons simple you have to write radio tags and in front of you there will be the layout of radio.
But here is the radio button with the help of SVG if you don’t know SVG. So please check our official blog site for SVG information you will learn a lot from there only.
Hey learners..!
Welcome to our 🎊 today’s blog with code with random. In this blog, we gonna learn how we can design an SVG radio button.
I hope you must have got an idea about the project.
Let’s have a look at our project.
This is the initial stage of our project preview. After hovering it you will get an image like this.
HTML SECTION
Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.
We have the following part in the HTML section.
- Here we have a very simple HTML layout firstly we have input as a radio button then we have svg tags within this we have two circles we have designed with setting cx and cy and radius.
Go through the below code 👇 and run it in your IDE or where you used to design just HTML without CSS styling.
<label class=<label class="radioBtn">
<input name="btn1" value="1" type="radio" />
<svg class="svg" fill="currentColor" preserveAspectRatio="xMidYMid meet" height="34px" width="34px" viewBox="0 0 34 34">
<circle class="radioOutline" cx="17" cy="17" r="15" fill="none" stroke="black" stroke-width="3" />
<circle class="radioDot" cx="17" cy="17" r="8" fill="red" />
</svg>
Radio Button 1
</label>"radioBtn">
CSS SECTION
By CSS we have already designed our circle but with the CSS file, we will set some property of opacity of both circles.
Like when you will hover over the circle its opacity will be changed to little light.
when you will check this then opacity will be in full mode this is all about it our CSS file.
The Below code will analyze you more👇. So just add in your HTML half complete file and wait to watch some magic.
.radioBtn {
font-size: 1rem;
display: flex;
align-items: center;
input {
display: none;
}
.svg {
margin-right: 0.5em;
}
.radioDot {
opacity: 0.1;
}
.radioOutline {
opacity: 0.2;
}
input:checked + svg {
.radioDot,
.radioOutline {
opacity: 1;
}
}
&:hover {
.radioDot {
opacity: 0.2;
}
.radioOutline {
opacity: 0.3;
}
}
}
For a live preview, you can follow the below codepen…
See the Pen Radio Button with SVG by Ahwei (@kilgarenone) on CodePen.
By this blog… We have learned how we can design a SVG radio button .
Now I’m looking for your reviews.
So, How was the blog 😁, Learners!
If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.😊
I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers hearts with enthusiasm for writing more and new blogs.
You can follow me on Instagram
Written by @Ankit kumar
