Fun button effect with HTML, CSS & JS

Рет қаралды 20,772

Күн бұрын

Try Brilliant with a 30-day free trial, and get 20% off an annual subscription 👉 brilliant.org/KevinPowell/
Looking to step up your CSS? I have free and premium courses 👉 kevinpowell.co/courses?...
🔗 Links
✅ Patrick Hill's Dribbble shot that inspired this video: dribbble.com/shots/22117329-G...
✅ Finished Code: codepen.io/kevinpowell/pen/LY...
⌚ Timestamps
00:00 - Introduction
01:27 - Creating the hover state
03:17 - Using a pseudo-element for the coloured part
05:45 - The problem with the current setup
07:21 - Solution to the stacking context issue
10:10 - Adding some locally scoped custom props
12:00 - Adding the blurred effect
14:04 - Improving the pseudo-element on hover
15:28 - Adding more controls through custom properties
18:46 - Creating the "pressed" state
21:37 - Adding the graniness
26:57 - The outline
30:49 - Starting the JavaScript
34:54 - Moving the pseudo-element
37:55 - Making sure it has a smooth transition
42:00 - Limiting how much the pseudo-element moves
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZfaq channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 38

@farzadmf 2 ай бұрын

I wish KZfaq had a love button to react to videos; thumbs up doesn't do justice here!

@cintron3d 2 ай бұрын

That's what the 'Thanks' button is for 😉

@farzadmf 2 ай бұрын

Oh man, you're totally right; not sure why it didn't come to my mind (given that I've used it before!)

@joshuamitchell6204 2 ай бұрын

Amazing tutorial! I always find myself trying to remember where I saw how to do something tricky CSS related and more often that not, your channel is where I end up landing. Love the in depth explanations every step of the way

@YusufKayeht 2 ай бұрын

For transitions I prefer to just use transition: var(--speed); and transition-property: color, background-color, etc.; when they all need the same transition speed.

@phamsu 2 ай бұрын

multiple skills in one video, thanks for your tutorial

@sauerworks 2 ай бұрын

💡display: inline-block is very useful for keeping your elements inline but also want to do transformations. Span-sformers: more than meets the eye. 😉

@kerrykreiter445 2 ай бұрын

Really fun tutorial! Thank you Kevin !!

@waynebro7828 2 ай бұрын

thanks kevin, very cool

@new-wave0 2 ай бұрын

kevin, you are the best!

@Way_Of_The_Light 2 ай бұрын

Please continue making cool design tutorials like this 🙏🙏🙏

@OQBA-ABQO 2 ай бұрын

Thank you for the work that you are doing and sharing with everyone :)

@trunglevan860 2 ай бұрын

so amazing!

@atg878 2 ай бұрын

thanks for the video

@ck0024 2 ай бұрын

isolation: isolate; will fix the z-index issue

@sarojchauhan7392 2 ай бұрын

Superb ❤

@yure-ribeiro 2 ай бұрын

Master please! Can you make a video about this color effect behind the KZfaq videos. with css and javascript, it would be great! Thanks for the content, I'm a viewer from Brazil!

@cmpc724 2 ай бұрын

Sorry if I’ve missed this somewhere Kevin, but do you have a video on how you structure your project folders? And how you reuse components, like headers/footers/nav across all HTML pages? Thanks.

@joedesoto4972 2 ай бұрын

Nesting has slightly better browser support if you use the `&` symbol, even though the requirement isn't strict

@clevermissfox 2 ай бұрын

Huh? You can’t do transforms on inline elements? I was just going to counter with that I’ve def scaled images but my reset makes them a display block first. Very very interesting EDIT: so correct that the span within the button couldn’t get transforms until given a display block but a span outside the button took transforms no problem. Maybe KPow meant inline elements within inline elements

@liski12 2 ай бұрын

I'm curious. Couldn't you have had a custom property for the "calculated" motion for x and y so that you don't have to use calc 4 times? Changing the `--_x-motion` and `--_y-motion` and have a `--_x-motion-factor : calc(var(--_x-motion) * var(--_motion-factor) * -1)` and such? To me it'd have been more efficient, but maybe there's a reason unknown to me why the way you did it is better. (Sorry for the formatting.)

@LePhenixGD 2 ай бұрын

22:20 I'm curious to know, couldn't we use the ::before pseudo-element to create a linear background effect and then apply an SVG filter using the filter property ?

@clevermissfox 2 ай бұрын

Why not use backdrop-filter: opacity instead of the before element with the grain texture? In this situation obviously there are other background elements but I never see anyone using bdrop filter opacity. I’m sure there is a reason but what is it? Esp if we already have a new stacking context anyway so it won’t trigger that

@christianschmidt2915 2 ай бұрын

Great video, very inspiring, thank you. Just an idea: you could have your --_motion-factor go from -1 to 0 and control both the distance and direction with one property, instead of having the direction tugged away as a magic number in the calculations.

@simoncornforth4572 2 ай бұрын

Nice effect. Isn't also necessary to remove the event listener when finished with to prevent memory leaks. If used as a component when mounted in an spa, they'd compound and cause issues?

@RojoSalas 2 ай бұрын

🔥🔥🔥🔥🔥

@MrCrackerplays 2 ай бұрын

unless I'm looking over it I don't think the link to the article about --_variable naming is in the description

@ShadowDrakken 2 ай бұрын

why not use transition: all for these types of elements? It's rare that you would ever have different speeds for different parts of the transition, and you could just split those out as-needed.

@harmmie 2 ай бұрын

I was wondering, is it also possible to make the background on hover not only transition on enter and exit, but also on the hovering, so it smoothly follows the mouse, instead of instant mouse following?

@aspizuwastaken 2 ай бұрын

yes, but you need to keep some state in js.