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.
U clearly fully understand what you're talking about compared to other RU-vidrs. Not even knocking others but u have amazing overall knowledge and a great way of explaining things. Nice one!
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.
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.
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.
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.
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
@@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.
@@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
@@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)
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
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
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?
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.
@@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.
@@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.
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
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!
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 ❤
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.
@@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.
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?
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 !! 😵😵😵
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.
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?
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.
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.
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 ... 🤷
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)
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?
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.
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.
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
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.
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).
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.
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.
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.
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 :)
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.
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.
