Animated Social Media Buttons 3 Ways | HTML & CSS

Channel:
United States codeSTACKr
Subscribers:
296,000
Published on ● Video Link: https://www.youtube.com/watch?v=TmnWfWsV0PM


Duration: 33:48
4,248 views
156

In this video we'll create three sets of social media icon buttons using only HTML and CSS (SCSS). We will use Font Awesome for the icons. Each example will have a unique, awesome animation. I'm calling these "Sleek", "8-bit", and "Glitchy". Let me know what you think..

Source Code: https://github.com/codeSTACKr/social-icons

Timestamps:
00:00 - Intro
00:40 - Sleek Button Animation
14:15 - 8-bit Button Animation
30:35 - Glitchy Button Animation
_____________________________________

📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions

🚢 Deploy for FREE on Vercel: https://vercel.com/ambassadors/codestackr
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

Watch Next:
Web Development - Beginners Roadmap (2020) - https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #CSS #learntocode



Other Videos By codeSTACKr


2020-01-03JavaScript Null vs Undefined - #JavaScriptJanuary
2020-01-02JavaScript Equality in 90 Seconds #JavaScriptJanuary
2020-01-01JavaScript in 90 Seconds #JavaScriptJanuary
2019-12-30Channel Update 2020 - The Future of codeSTACKr
2019-12-21JavaScript this Keyword Explained In 3 Minutes
2019-12-11CSS Position Explained In 6 Minutes
2019-11-29Web Developer Roadmap 2020 | A Guide To Starting A Career In Web Development
2019-11-20JavaScript Loops Made Easy
2019-11-15CSS Units of Measurement [rem, em, vw, vh, px, %]
2019-11-06Emmet = Faster HTML & CSS Workflow!
2019-11-01Animated Social Media Buttons 3 Ways | HTML & CSS
2019-10-19Top 10 Best VS Code Extensions
2019-10-11Fetch API Explained - Working with Data & APIs in JavaScript
2019-10-02Animated Responsive Navbar with Mobile Mega Menu Tutorial - (SCSS)
2019-09-27Backtick Template Literals Slower? - JavaScript String Testing
2019-09-24Transparent Login Form - HTML & CSS ONLY
2019-09-20Before and After Pseudo Elements Easily Explained [CSS]
2019-09-13Responsive CSS iPhone 11 Product Card Tutorial
2019-09-11Animated Hamburger Menu Tutorial - CSS Effects
2019-09-06Async JavaScript - Callbacks, Promises, Async/Await
2019-09-03JavaScript ES6 Arrow Functions Tutorial


Tags:
adding social media buttons html
social media icons html
css social media buttons
css social media icons
social icons
social media icons
hover effects
font awesome
fontawesome
fontawesome icon
css3 hover effcets
cool css hover effects
css icon hover effects
css fonts awesome
css tutorials
pure css icon
social icon
how to add social media icons in css
how to add social media icons in html css
adding social media icons manually
css social icons
html
css