Fun button effect with HTML, CSS & JS
Vložit
- čas přidán 1. 06. 2024
- 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 CZcams 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!
![[柴犬ASMR]曼玉Manyu&小白Bai 毛发护理Spa asmr](http://i.ytimg.com/vi/0TsXQ7z2Dh4/mqdefault.jpg)
I wish CZcams had a love button to react to videos; thumbs up doesn't do justice here!
That's what the 'Thanks' button is for 😉
Oh man, you're totally right; not sure why it didn't come to my mind (given that I've used it before!)
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.
💡display: inline-block is very useful for keeping your elements inline but also want to do transformations.
Span-sformers: more than meets the eye. 😉
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
multiple skills in one video, thanks for your tutorial
Please continue making cool design tutorials like this 🙏🙏🙏
thanks kevin, very cool
Really fun tutorial! Thank you Kevin !!
kevin, you are the best!
so amazing!
Thank you for the work that you are doing and sharing with everyone :)
thanks for the video
Superb ❤
Master please! Can you make a video about this color effect behind the CZcams videos. with css and javascript, it would be great! Thanks for the content, I'm a viewer from Brazil!
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
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.)
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 ?
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
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.
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.
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?
Nesting has slightly better browser support if you use the `&` symbol, even though the requirement isn't strict
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?
yes, but you need to keep some state in js.
🔥🔥🔥🔥🔥
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.
Where can I get free designs to practice ?
unless I'm looking over it I don't think the link to the article about --_variable naming is in the description
isolation: isolate; will fix the z-index issue
Transparent buttons are cute, but I firmly believe things jumping on hover are bad user experience.
💯
inline-block
First to comment.
Bro is not. Teaching css bro is css