Creating a CSS-only directionally aware button

Подписаться 918 тыс.

Просмотров 66 тыс.

50% 1

Nothing wrong with a little JS here and there, but it’s always nice when we can make something work without it, and thanks to :has(), there are a lot of new things that are possible with CSS only, like this effect!
🔗 Links
✅ More on has: • :has() opens up new po...
✅ Finished code: codepen.io/kevinpowell/pen/dy...
⌚ Timestamps
00:00 - Introduction
00:44 - The HTML and starting CSS
02:20 - Setting up the hover zones
05:00 - Adding a pseudo-element for the effect
06:56 - Making the effect work from the middle
09:20 - Making the effect work from the sides
11:20 - Improving how it looks
14:15 - Improving the look when you let go of the click
16:15 - Browser support
#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 RU-vid 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!

Опубликовано:

18 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 135

@BoraKucukkara Год назад

Kevin in 2035; creating CSS-only web browser

@BenjaminAster Год назад

I made a CSS-only Minecraft

@melodium10 Год назад

in 2050: creating a CSS-only functional human

@danagobrr Год назад

impossible cause css is a stylesheet language.

@sarcasticcat9876 Год назад

@@danagobrr normie spotted

@ShayanBinShad Год назад

@@BenjaminAsterThat was mind-blowing!

@waynearliss1433 Год назад

Great tutorial and channel, really got me back into HTML and newer CSS. I tried this and then experimented with this effect as navigation - replaced the buttons with an unordered list in and it works as expected, very cool effect.

@dave6012 Год назад

Oh man, the way your centered that pseudo element 🤯

@TechBuddy_ Год назад

This is exactly how I thought it would be. I tried to do it on the day you made the community post and I couldn't make it work with pseudo elements for some reason so I added two divs like you did and it worked. I also added a bunch of divs in a grid and made it feel better but I didn't really like that approach.

@VasilyPavlik Год назад

I think this is the most common comment below all Kevin's videos. I write such comments in almost all cases :)

@TechBuddy_ Год назад

@@VasilyPavlik 😆

@Furki4_4 Год назад

THAT'S I'VE BEEN WAITING FOR ! Thank you Kevinnn

@siriusgd4753 Год назад

Very nice! 😎 I was looking for something like this! You never disappoint Kevin! 😉

@amjedh7133 Год назад

i just watch ur vedio and keep learning more and more u r rly good keep it up brother

@wendanny6732 Год назад

It's really useful and so cool, thanks !

@FernandoBelloEchevarria Год назад

Thanks for the trick, I love it!

@TheBoysMemes123 Год назад

looks awesome like your every video

@WPPatriot Год назад

I loved your explanation of why the animation was faster when it was in the middle as opposed to at the sides, took you like 5 sentences to go absolutely nowhere 😂 Love your video's, keep it up Kevin ❤

@arjix8738 Год назад

I'm having multiple strokes trying to comprehend this comment. "I loved your explanation" "Took you 5 sentences to explain nothing" Can you spot the contradiction? If you cannot, then it means you intended to insult him. "I love how stupid you are" is the meaning you conveyed.

@WPPatriot Год назад

@@arjix8738 Its a complicated explanation and I loved (as in I found it funny) how he half heartedly tried to explain it. I didn't mean anything bad by it, honestly.

@JaGaNezhil Год назад

Following madly ❤

@niklausmikael9219 Год назад

Great video Kevin🔥🔥

@sambenjamin7515 Год назад

Hey Kevin, thanks for the video, you are a CSS wizard.

@nerdsum663 Год назад

Mind blown ❤

@heavylog1c Год назад

I think you can make it without :has. But it will need 1 more hitbox for center and 2 more ::before elements.

@roadto200million Год назад

It doesn't look that magical now that we found out how sausage is made compared to when we saw a sausage preview, but we're here to be sausage makers anyway, so we are now happy with this new acquired skill. Thanks.

@toms2oo8 Год назад

Gotta say I do prefer transforms + translate due to the performance of animating things. But yeah I do agree with others with the whole this should just really be JS. It's a cool trick but not something I would ever want to deal with in a shared codebase, at least until something new comes along to allow CSS to somehow figure out the mouse position or similar.

@gustavo9758 Год назад

This is good stuff!

@okoye.charles Год назад

Literally been waiting for so long... And it's worth it ❤️

@8koi245 Год назад

wow really makes you want to code some css

@ninjacodertech Год назад

yay the video is finally out

@GlobalStreams Год назад

Thankyou 💗

@VasilyPavlik Год назад

WOW!!!! In pure CSS.

@twistedmetal7882 Год назад

Thanks for being the last honest person who cares about CSS

@simbamadungwe Год назад

I just started HTML and CSS recently and your tutorials are changing me in not itme you the best. God made people like you to help people like me, you are loved.

@Zuriki09 Год назад

I know that this is a "CSS only" type of gimmick, but it really is something you should just do with JavaScript. Grabbing the mouse position and storing it in a CSS variable is a couple lines of JS and much cleaner to work with in CSS itself and will give better results. Hopefully CSS spec will add a mouseX calculated value some day.

@DjLeonSKennedy Год назад

I agree, it's just a simulation

@foxxo-dev Год назад

Hey big fan of your vids!!

@itspawanpoudel Год назад

Kevin is the nickname for css, for sure

@sanmeetsingh4538 Год назад

Great no need for js to add classes and timeout perfectly 👌

@theodorealenas3171 Год назад

The moment it turned subtle at the end, it made it feel so slick! It reminds me of drawing, where you draw everything as polygons and only round it in the end. I haven't drawn in a while now though. Also, do people write plain HTML? I understand that was the original intent of HTML but I'd do anything to avoid that, I'd even make my own language or something and autogenerate HTML.

@TechBuddy_ Год назад

I kinda do write HTML I started using astro js to split my apps into components, it supports running arbitrary js at compile time that finally outputs static HTML which is exactly what I want

@theodorealenas3171 Год назад

@@TechBuddy_ Astro does look nice, though I haven't tried it. But you still do use components, right? Because I got the implication that people don't split into components when they write HTML. I used a bit of PHP for a school project and I did make components basically, more like, I wish I made way more components than I did.

@TechBuddy_ Год назад

@@theodorealenas3171 People write HTML but anyone doing anything other than a simple landing page use a framework like astro or something like next for more complicated ones. If you are not a fan of JavaScript we have php or any other templating language like pug, nunjucks etc

@theodorealenas3171 Год назад

@@TechBuddy_ fun fact I tried making one on my own, which did simple file substitutions where there were HTML comments, and it was recursive. That was fun but extremely stupid. I don't really have something against JavaScript (yet)

@koenahn Год назад

Very cool! Would button:has(*:active)::before work for the shorter delay instead of listing the spans in the selector? Also, I believe unlike the transition for the transform property, the timings for the opacity should be the same regardless of the place the animation starts from. Thanks for the amazing front end inspiration Kevin!

@stribormarincic9129 Год назад

Nice idea, 404 on codepen :)

@KevinPowell Год назад

Just fixed it :D

@learning_stuffs Год назад

Thanks

@BalintCsala Год назад

You can solve the issue with the before element scaling back towards the wrong spot at the end by using :hover instead of :active, it looks especially better if you use even more regions

@mkutilisateur4522 5 месяцев назад

Thanks for this video! How to keep the css style generated by the click AFTER the clic, to avoid going back to the initial css style that we had before the click?

@bevik12 Год назад

I hope they bring a something so we don't need to use spans. I did a growing border-bottom and color from the center and using spans is just painful with Tailwind also in React.

@santoshparker8681 Год назад

Lovely video as expected. Please create a video which will contain different types of advanced animations which we can add to our sites.

@KevinPowell Год назад

I'm not much of an animation guy, I just like mucking around with the small things :D

@santoshparker8681 Год назад

@KevinPowell No problem sir, we just enjoy your content with fun and love. Keep uploading.

@davronbekable Год назад

It is very difficult to create, but it is very nice to see the result

@AlexCernat Год назад

nice video! as a challenge, can you create a toggle switch WITH TEXTS INSIDE (like on/off etc.) using only css and an input.checkbox?

@_ric Год назад

Just to let you know, the codepen ("Finished code:") link in the details panel is incorrect. You are missing a trailing 'j' from the URL.

@KevinPowell Год назад

thanks!

@iAmTheWagon Год назад

🎉🎉🎉Yeeaahhh

@mannixmd Год назад

Kevin do you know a reason why button element doesn't have a cursor set to pointer by default???

@KevinPowell Год назад

It's how UI buttons work at the OS level, so it's matching that behavior.

@omittedcookie3250 Год назад

I’m pretty new to the channel but I’m finding the videos really helpful with websites I’m creating for others!! Is there a list of websites that can help with developing one? I mainly use w3schools for basic tutorials on html and css

@KevinPowell Год назад

If there is something I need clarification on, I usually google it with "MDN", tends ti be more in depth and up to date than w3c

@GetAnswerly Год назад

Does the new "has" keyword look for an existing selector, even if it's not for an element bur rather an attribute, ie ":last-child:active"?

@canarymultimedia Год назад

I think it's nice, but the effect should finish, even after the mouseup event (in case you click quickly, as you normally would, and don't press the button long enough just to see the effect).

@tonmaysardar3331 Год назад

css god

@chubsterbbb 7 месяцев назад

How would you implement the same effect when you hover over the button instead of holding down click?

@kiryls1207 Год назад

how do you debug something like that? by slowing down, putting vivid colors and borders?

@lennard4454 Год назад

Amazing🔥Firefox doesn't support the has pseudo at all and sadly, it seems like, as if it's not going to be implemented any time soon....

@NevenZec Год назад

Now, how to make that effect for where you cant add span elements?

@jason_v12345 Год назад

The effect is cool, but it's only visible it seems when you click and HOLD the mouse button. Otherwise, it just looks like the button glitched. Is that intentional?

@Take-the-Ticket Год назад

Hey Kevin :) The link to the pen is not working. You need to add a j to the end of the URL.

@KevinPowell Год назад

Thank you so much! Just fixed it 🙂

@sibaiisaac Год назад

Love this. could the the animation seem faster in the middle because of the ease? when you don't specify an ease, the default ease is: "ease", and because the circle quickly covers all the visible space, the slower part of the animation (the end) is out bounds where they're invisible.

@WPPatriot Год назад

It's not the ease, you would have the same effect with a linear timing function. It's because when it starts in the middle, you're looking at both sides of the circle expand but you're only seeing the first half of the animation (the rest being obscured by the overflow). When the circle starts at the side, you can only see half the circle expand but you can see that half for (nearly) the entire duration of the animation. It's hard to come up with a fitting analogy, but it has to do with the fact that in one situation you're looking at the distance between the two outer edges of the circle and in the other you're only looking at the distance between the center and the edge of the circle. Combine this with the fact that you always only see part of the animation because of the overflow, and the animation that has the circle start in the middle looks a lot faster. If you'd remove the overflow: hidden, you'd clearly see that no matter where the circle starts it takes the same amount of time to grow to the same size.

@CirTap Год назад

Firefox Developer Edition 112 finally passed all the platform tests for :has(), so it won't be long it also should be enabled by default in mainstream. I hope 114 will have it. They finally implemented the sibling selectors like :has(.bla + .foo) and :has(.bla ~ .foo) and some of the "esoteric" complex stuff. This and @container queries allow for so much smarter and less bloated CSS.

@Cloud-tq5lj Год назад

I can see your camera has a background image of linear-gradient(to right, blue, red)

@alishata8 3 месяца назад

Although Transitioning is good approach but it requires opacity transitioning to hide the center positioning, So I used animation instead that scales to 20, and make it fill forwards, with a duration of 1000ms with an ease-out timing func, and changed the duration on both spans, also changing the margin on them both

@azibros Год назад

Yeee

@c__beck Год назад

[mind blown].gif

@GR_BackingTracks Год назад

...best Android RU-vid AdBlocker?

@shahab1 Год назад

Hey Kevin ! I am not a youtuber and I do NOT wish to be! I am learning web development and you've been a HUUGE help throughout the journey, thank you. But just out of curiosity! what do you do with your videos that no matter which quality I choose, it always looks 1080 HD !!! seriously, it's amazing !! 😵😵😵

@KevinPowell Год назад

No idea, lol. Export with default 1080 premiere settings 😂

@jared9869 Год назад

Could it use :hover instead of :active on the spans so that the margin-left/right stays the same when you stop pressing?

@willsterjohnson Год назад

That would probably work, give it a try and let us know

@jared9869 Год назад

@@willsterjohnson It worked 👍. I also found that you can use width: 100% instead of the scale which makes the animations more consistent :)

@piyushkothari3 Год назад

Can't you increase the size of those spans, just target the active state of the spans, and increase the relative z-index of those based on where you clicked?

@awekeningbro1207 Год назад

button:has(:first-child:active) how is this working? does span also have active state like button?

@1Andypro Год назад

Is button:active::before the same selector as button::before:active ?

@JasonJA88 Год назад

Noice...

@mohamedlabarre166 Год назад

Hi Sir can you make a video about font variation settings thanks by advance.

@Dr.smileclinic Год назад

Kevin says css is programming language 😂❤

@The14Some1 Год назад

13:50 Kevin, why did you double this? :)

@serkan_bayram Год назад

I notice you and other web developers avoid using heights and widths as much as possible, like at the beginning I saw you used padding to give some width and height to your button, is there a specific reason for doing this?

@traviswatson6527 Год назад

Defined widths and heights make you fight... Fight with clipping, overflow, positioning, responsiveness, etc etc Letting things be sized naturally takes getting used to, but once you do you find the rest of your layout gets so much easier.

@telephonedude Год назад

This is a really cool effect, and a great way to show multiple pseudo-classes working in tandem. That said, I do kind of disagree with your motivation here. In an ideal world, yes, this would be pure CSS. But right now what you've done is shifted the burden from Javascript (functionality) to HTML (structure), which I would argue is the least semantically correct between the two. It also adds a layer of complexity, at the cost of accuracy. Using JS, you could simply reposition the growing circle whenever the user clicks the button and be done with it. And if you're writing it as a component anyway as you suggested, you can just take care of it once in there. Plus it takes care of the developer having to remember to put in the invisible spans in as well. Just my $0.02 :)

@SamanthaSanders 5 месяцев назад

I can't get "isolation" to register in my editor

@Zashxq Год назад

im working on a solution for the problem described at the top of the video. hang tight!!

@darkmatter8650 Год назад

Hey, Kevin.. I am editing PDF on pdfcandy... Their support is not good. Everytime after editing it's size should be decreased but.. It increases. PDF loading takes a hour. Cursor rests for few seconds after a sentence editing. Page jumps sometimes automatically, a u to scroll, smooth scroll unchecked. Now a days shows a script may be busy on this site -unresponsive script error. In safe mode.. Same result. I did this on Firefox. Chrome shows memory error and edge is Same. May I have your mail? Then you can check yourself with my PDF. Reply soon Please.

@yassinesafraoui Год назад

That is good for educational purposes, but as you mentioned it, if you're working on a medium/big project you'll probably use a component based library, meaning that you have direct access to JavaScript, so I don't consider not using it a big win. And having seen the solution for this, I bet doing this with JavaScript will be more straightforward. And even for small sites it's not that big of a deal to use JavaScript it's not like bad for performance or sth. So ... 🤷

@JawsoneJason Год назад

Why not use JS to set --pointer-x and --pointer-y onMouseOver? Then, CSS can still determine the styling, while also knowing EXACTLY where the pointer is.

@KnThSelf2ThSelfBTrue Год назад

plus, better browser support

@goodshiro10 Год назад

well, you technically can do it, but that's not the topic of the video. You're correct we can use JS for a better and cleaner code

@JawsoneJason Год назад

Yes, and I think that's my argument: CSS-only is a wrong way of achieving this.

@williamhorn363 Год назад

@@JawsoneJason I don't think so. If you can achieve something stylistically without JavaScript, then you absolutely should. That's why CSS exists in the first place.

@KnThSelf2ThSelfBTrue Год назад

@@williamhorn363 I don't think it's black and white. There are tradeoffs either way. In addition to being arguably more "tidy" by handling visual effects in styles, my guess is the pure CSS way is slightly better with memory than the JS implementation I'm imagining, but JS clearly has the edge with respect to browser support and responsiveness to the cursor position.

@ProCodeSoftware Год назад

You can make the ripple effect like this, now without js

@nikilragav Год назад

why not just transition the size of the span itself vs a before element?

@tamaskovacs-ajtai7489 Год назад

You can use a one character element like or to not clutter the code.

@tamaskovacs-ajtai7489 Год назад

And you can create a web-component out of it, and hide the inner stuff as well. It is introducing JS tho, but noone usess just css on a page :D

@KevinPowell Год назад

100% making it a component is the way to go when you need extra nested stuff like this :)

@BugMosphere Год назад

this is called ripple effect and I think it is the default behavior of button in android

@rachitshukla30 Год назад

Need videos for web3 threejs webgl please :)

@KevinPowell Год назад

You'll have to find another channel, both not my realm :D

@rachitshukla30 Год назад

Haha no problem. Love your css videos

@keessonnema Год назад

No one is going to click and hold to have the effect finish. If you click it it's just a circle showing up for 200ms in the middle. The effect should finish, but you can't do that I think.

@goodshiro10 Год назад

Bro, your videos are amazing, the only thing is it feels too long watching your videos (although we could skip but may miss some important points). So can you come straight to the point instead of lengthy intros and stuff (like having the base ready and talk only about the topic we're gonna dive into)

@the_BetaDev Год назад

The issue with :has can be solved by using some preprocessors like scss

@KevinPowell Год назад

Could you go into detail on how? `:has()` doesn't select the child element, but the parent itself, so `parent:has(.example)` . This selects .parent when `.example` is nested inside of it. This is very different from something like `.example { .parent & `, which selects the child that is nested in the parent. But maybe I'm missing another technique.

@Cd5ssmffan Год назад

404 on codepen

@KevinPowell Год назад

fixed it :)

@ZeeZeeGaming Год назад

width: calc(100% / 3);

@AppleGameification Год назад

Wait how does that button:has(:first-child:active) work lol

@KevinPowell Год назад

The longer video I linked to in the description on :has() explains how it works in a lot more detail, but basically, it's selecting the button if it the first child is actively being clicked on

@karlheinzneugebauer Год назад

Nice trick. But I have to say that I absolutely hate Material Design because of that.

@Tijme Год назад

At this point you should just use JavaScript for the positioning of the pseudo element right? This would be very easy if you’re using a framework.

@SeanGoresht Год назад

I get the urge to put the spans in a "component", but I don't think this would be the right approach, regardless of framework. In Chris Coyier's podcast Shop Talk Show, he specifically uses the button example, like here, as a place where beginners tend to create "components" unnecessarily. If you just have a button with a few spans in there, why do you have a separate component again? Why not use ? Instead, I think something like a "custom attribute", a "directive" in the angular and vue worlds, or a "modifier" in the ember world would make more sense, that appends the two spans, and then you can customize any button with a custom attribute like . If everyone starts creating custom components for basic elements like this, then we will lose the semantic web.