Create a Custom SVG Checkbox (Animated AND Accessible!)
http://www.linode.com/designcourse - 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:
https://codepen.io/designcourse/pen/K...
https://codepen.io/Foxxite/pen/LYEdOoX (Improved, no JS)
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/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!