Create a Custom SVG Checkbox (Animated AND Accessible!)
ฝัง
- เผยแพร่เมื่อ 9 ก.พ. 2025
- www.linode.com/... - Use code 'DESIGNC19' to get $20 credit on your new Linode account!
(Codepen below) - Today, we're going to check out how to create a custom SVG checkbox that animates on click. We'll use Chromevox to ensure it's accessible as well. First, we'll hop into Adobe Illustrator (although, you can use any vector-capable software) to design the icon, then we'll define the HTML and CSS. There's a tiny bit of JavaScript as well, to toggle and reverse the animation.
Codepen demo for this project:
codepen.io/des...
codepen.io/Fox... (Improved, no JS)
Let's get started!
- - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
Enjoy this? Sub up for moreeee!
@DesignCourse If you assign the property transition just in the first style block, it will automatically reverse itself. Because if you assign it just in checked state - when its not checked it doesent have that transition. You dont need a javascript at all :) Thank you for great tutorial !
Yes Right... Try this Gery and reply here. Please.
i really want to see a tutorial on how to animate svg's without taking to afford adobe
Yeah I Really Enjoyed
You actually don't need to add javascript to reverse, you can set your transition to be on the unchecked/default version, it will reverse it. Great video though!
Maybe he did it for a reason we can't think of. Or maybe he just didn't think about it.🤔
When he putted the transition inside the "checked" selector, I was bother thinking on it. Then he said he would need javascript to toggle class and.... I was kinda triggered by it xD
Yeah, I was thinking the same thing. I'm doing a similar effect, but with changing the fill color of the svg and that's how I did it. Proves there's often several ways to approach these things.
Plot Twist: He was just flexing his JavaScript skills. :p
he didn't make the code work with more than 1 button 🙂
Really interesting video. In case anyone is confused regarding the checking if the checkbox is checked even though the display is none.
I found that the reason it still works is because just because the checkbox is hidden, clicking the still toggles its value on and off.
Well ofc, thats why the svg is inside the label tag and lable has an attribute " for='id-of-the-input' ". Without it, it wouldn't work.
Awesome I was hesitated to start playing with SVG, maybe this is the start ;D thx a lot
Go for it! SVG Animations are awesome!
@@MrAndi1281 if you can afford photoshop or ilustrator as a hobby
@@weshuiz1325 ever heard of pirated? 😂
Those prices are waaayy too high no one would buy just for learning.
@@dharmang i'm not a thief...
those people need to suport their fammiliy's aswell
you would't like when somebody stole from you would you?
i would't mind paying if it was only once
@@weshuiz1325 what does that mean?
I am not sure but if i remember correctly if you put transition on the unchecked checkbox you will get smooth transition without JavaScript for the unchecked element.
You are doing a great job. Helping designers understand all nuances. Thanks for your tutorials.
thanks a lot... I was searching for this from a long time and finally got this clear way of doing things for custom checkboxes / radio buttons
Another quality video sir
Learning lot from your channel day by day
Thank you so much :)
Much love from India ❤️️
Awesome, i want to see more videos with svg animations
Looks awesome, but... never... never ever hide native checkbox with "display: none". Use "appearence: none" or "visually-hidden"
Why is that?
Hey Gary,
U can use prettier extension to indent all those stuff automatically...
but, can it acually send data, when the input field gets display:none? doesnt that remove it from the dom? maybe only visibility:hidden ?
Utilizing that Skeuomorphism right there too.
thanks
I like your videos a lot. You go for the simply and functional. Ive got a question, just curiosity. Can you avoid using JS ? ive thought in put 2 exact svg and animate one on the entry and the other on the exit, playing with opacity... I know the js in this video is easy, but to keep the things out of js... just curiosity. Thanks for your answer
Thank you very much on this great tutorial and awesome explanation :D
Love your content! Can you do some svg animations on a select to make til more smooth to look at?
Can you make a CSS framework with your styles?
The main issue here is that you put the transition inside the wrong part. The improved version you linked to simply put it in the right one. Next time check for such things, every transition goes both ways normally, if not there is a mistake
Waiting for 500k subs 🧐
Me too!
Great tutorial, and I love the result, but I wish you'd go more into the accessibility aspect, and specifically the difference between `display: none;` and `opacity: 0;` here.
`display: none;` is not accessible. The element is just not rendered at all, and any interaction the user can execute is gone with it. The only reason the checkbox still works in this tutorial is because the label preserves the functionality. You can't tab to it, accessibility tools lose the outline on focus, and keyboard shortcuts stop working (space to toggle), so blind users will really struggle.
`opacity: 0;` will preserve all functionality. The element is still there, just invisible. You can then give it a width and height equal to the SVG, and position it absolutely right on top of the SVG. You can tab to it, the on-focus outline for accessibility tools is there, and you can also toggle it with space. Much better for people who struggle with their sight.
Thanks man! Awesome
This is great!
Are you a musician too !?
svg's are awesome
Whatever you teach are they open source??
Use whatever I create!
@@DesignCourse Thanks a lot.Your work is highly commendable .
Love this coding videos
Thanks.
I thought the label 'for' is related to the input name ?
No it referenced to the element ID
@@foxxite Thanks, generally I use the same name for both name and id which is why it still worked for me.
Love your style and videos. One suggestion I have is maybe don’t nest your styles so much. SCSS makes it easy and satisfying to nest but it can be a bad habit.
I would like to see a collaboration between Gary Simon(Frontend) and Brad Traversy(Backend). 😗
I've seen Brad comment on his videos so it could happen.
Thats a lot of work for a TH-cam video, maybe for a course i could see it happen .
🔥🔥🔥🔥
To anyone who reads this please never use global selectors like input[type=checkbox] again. This is such a bad practice. Instead use something like contact-form__checkbox or contact-form__inner. BEM saves you and other devs so many headaches because you don't have to worry about side-effects. For example if BEM was used in this codepen I could actually copy it over without having to rewrite it entirely.
next a tutorial for how to aninate svg without taking a loan
Dude you make some good videos forreal
I actually made a neumorphic app based off of what I learned from your previous video!
Myvideotagger
.com 😁
Wtf was that indeed 🤣
Useless tutorial for real world. If I have a large table with a checkbox in each row, it means that I duplicate SVG code in my html for every row