Create an account to use AI

Create a free account to unlock all features:

Ask questions about videos with AI
Use smart search (AI)
Save your favorite videos
Bookmark your favorite categories
Organize your favorite subcategories
Access your personalized favorites page
Access your conversation history
Personalize your homepage with your favorites

Create an account

Already have an account? Log in

Create a Custom SVG Checkbox (Animated AND Accessible!)

DesignCourse

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/KKwovgX

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: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF

^-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!

Create a Custom SVG Checkbox (Animated AND Accessible!) | Knoovi