Man I love this cool effect with CSS Conic gradients!

Code for this button effect here. Should few good replies pointing out how to do it without the extra element too.

No need for any nesting/ pseudos. Make the `conic-gradient()` relative to `border-box` and restrict main button background layer to `padding-box`. Here's something similar for `img` elements + some added SVG `filter` enhancements (glow, rounding, tail...)

Y’all need to get one of Apple’s frontend developers on the pod. They do so much innovative stuff on their product site.

Agreed! Very hard to get Apple employees on the podcast. We had Jen Simmons, but that took a bit. One more coming up shortly as well

Me when I see the effect: "Ooooh, would be better if slowed on the ends" @wesbos at the end of the video: oh, and if you wanted to slow it down on the ends of the button... Nice demo!👍

Just need a way to translate the aspect ratio of the button to a timing function. Could probably get away with a generic one though

I remember when I first created this effect; it was unforgettable 😂 In my opinion, this is one of the most beautiful effects for special buttons.

CSS is packed with many properties, really hard to keep up

I believe it the convention is to select pseudo-elements with double colon ::before ? (To distinguish them from pseudo-classes which are selected with : one colon ) However apparently browsers also accept single-colon notation :before so 🤷🏻‍♂️

Yeah there is no difference in the selectors, but you are right