How to build a animated like button with HTML, Sass and Vanilla JavaScript
You know that moment when you want to build something with HTML, Sass, and Vanilla JavaScript but don’t know where to start? Well, then this video is for you. In this video, I show you my process of how to build a small project.
If you think those experienced developers do everything from their mind. Then your wrong 😉! I heavily rely on Google with everything.
Maybe this video is a bit longer than you would expect, but I explain everything I do as I do it. I explain why I use some things and what they gonna do.
Hopefully, you will learn a ton from it!
Find the CodePen here: https://codepen.io/frontendmr/pen/ZgoBKm
[Design]
For this project, I used a cool design from Dribble by Julian Camacho. He designed a cool button with an animation which I used as my inspiration. You can find it here: https://dribbble.com/shots/6788345-Li...
[Icon]
If you are looking for the icon that I used? Check out FontAwesome.com, create a free account, and load in your script in the HTML.
[Brand color]
When picking colors I always use brandcolors.net as my go-to website for nice color codes to just copy-and-paste.
[Override default button styling]
In this project, I wanted to get rid of all my default browser styling. So I found a great article on CSS-tricks: https://css-tricks.com/overriding-def...
[CSS transitions]
If you want to read everything about CSS transitions, please check CSS-tricks with this great article: https://css-tricks.com/almanac/proper...
[JavaScript ClassList]
Mozilla got great documentation about the classList API in JavaScript: https://developer.mozilla.org/en-US/d...
==================================
Enjoy! If you have comments, questions, or opinions please share them in the comments! 😇Or you can send a Tweet or DM via Twitter: / devbyrayray
==================================
🖊 I WRITE A TON OF BLOGS ON MEDIUM ABOUT:
HTML, CSS, JavaScript, NodeJS, Developer Tips
/ devbyrayray
==================================
=== MY FAVORITE DEVELOPER COURSES 🤓===
(includes affiliate links, which supports me to keep creating videos like these 😊)
📹 ES6 for Everyone by Wes Bos
http://bit.ly/ES6-for-everyone
📹 Beginner JavaScript by Wes Bos
http://bit.ly/beginner_javascript_wes...
📹 Master Gatsby by Wes Bos
https://bit.ly/wesbos-gatsby-course
📹 CSS Grid by Wes Bos (FREE)
https://bit.ly/CSS-GRID-WES-BOS
📹 Learn NodeJS by Wes Bos
http://bit.ly/learnNode
📹 Build 30 JavaScript projects with Wes Bos
https://bit.ly/JS-30
📹 React for Beginners by Wes Bos
https://bit.ly/REACT-FOR-BEGINNERS
📹 Advanced React by Wes Bos
http://bit.ly/WESBOS_ADVANCE_REACT