Building an AWESOME Button Micro-interaction (Frontend Dev)
https://bit.ly/3ohZegS – Become a frontend developer (50% off limited time!)
— Want to learn UI/UX? https://designcourse.com
— Today, we’re hopping back into the world of frontend development and we’re going to take a micro-interaction design I created a couple weeks ago using Adobe XD, and make it a REALITY in the browser with HTML, CSS and JavaScript (with GSAP being the basis).
Here’s the first part of the tutorial where we prototype this button microinteraction in Adobe XD:
https://www.youtube.com/watch?v=eCQCm4MbiKo
Here’s the codepen demo:
https://codepen.io/designcourse/pen/RwGzKbM
0:00 Introduction
1:17 An Awesome Offer from Scrimba
1:51 Writing the HTML
4:33 Writing the CSS
10:33 JavaScript
31:18 Closing Thoughts
Let’s get started!
#GSAP #Frontend #Microinteractions
– – – – – – – – – – – – – – – – – – – – – –
Subscribe for NEW VIDEOS!
Learn UI/UX: 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 Designcourse.com.
Come to my discord server or add me on social media and say Hi!
Duration: 00:31:45
source