Custom Radio Button with Animation
Hey all, I'm developing a custom Radio Button. It's going great so far. Had to hack quite a bit to match the requirements.
I've come up with 2 solutions. A simple one and a more complex one and I'd like to hear your feedback and see, how you would do it.
The first solution is a simple one: https://codepen.io/maxkuhlmay/pen/BagZVxy
It has a Radio Button and when its checked, the border width changes to create the "dot".
There are 2 problems:
I'd like to create a transition with cubic-bezier instead of ease to create a bouncing effect. Does anybody know, how to use cubic-bezier?
The Figma files say, that the background color of the radio changes to turquoise, when its checked.
Is there a way, to create that background? the background-color property would change the dot color. This should stay white.
I tried to recreate this behaviour with the second codepen: https://codepen.io/maxkuhlmay/pen/xxorXpj
This time I'm using ::before and ::after to create the Background and the Dot. The Dot increases in size to make a "bouncing" effect.
How would you do it?
I cant wait to see your solutions to learn 🙂 🙂
PS.: This CSS is still WIP and I'm trying to refactor some variables 🙂
5 Replies
As far as I understand it your first solution seems to do what you want without the need for psuedo elements.
You can change the transition to a cubic-bezier just by replacing "ease" with something like this
cubic-bezier(.47,1.64,.41,.8). This is a great tool for fine-tuning the effect: https://cubic-bezier.com
Your second solution seems overly complicated for basically the same effect. Don't get me wrong, I love pseudo elements, but if the desired effect can be achieved just by increasing the border thickness then why do anything else?
What I don't understand is the bit about changing the background color. As they are, in both your versions the radio buttons are already turquoise. Should the "unchecked" ones be a different color?
Are you referring to the border or the whole thing?
You then go onto say that the dot color should stay white.... I find this rather confusing but I am probably just missing something obvious.Thanks 🙂
The animation in the second example is hard to see.
If you check the radio, there should be an animation of a background from white to turquoise and the border width.
You could set the animation speed to 10% to see it.
I personally didn’t see the animation in Figma but our design team wants this animation 😀
Hey. The first solution was my attempt but our design system uses tokens for background, border color and width, foreground color, and so on.
I have to use those tokens, even if I don’t need them.
In the second example there is a background fading from white to turquoise.
This is missing from the first example and was acchieved by the before.
There is also an animation of the border width.
In the second example there is an after element which has the dot. This increases in size to generate a bouncing effect, which i tried to achieve in the first example with cubic bezier.
It’s complicated, right?
I haven't dove* into the code but from visually looking at the example you could set the background of the circle to turquoise then use the before element as the white background. When it's unchecked its inset: 2px and when it's checked it's inset 6px (or whatever values you need) so it just grows and shrinks . Or since it's animated the inset may not transition well and you could instead set it's aspect ratio and toggle/transition the width
I guess I have to figure that out.
Another problem is: I found a position fixed on my pseudo element. This positions it fixed on the site, not relative inside the input.
When I change to absolute, it’s hidden by the border. Is there any way, to position a pseudo element before the border?
I know, I’m overcomplicating things but we are building a design system and our design team wants us to use all the tokens even if I don’t need them.
I love the first solution but this is not accepted 😦
Thanks for the site. It’s awesome.
And Lea Verou is amazing. I’ve met her at the css day 🙂
Hey. I've found out, that having both ::before and ::after caused some issues at my codepen. One of the Pseude Elements overlapped the other.
I've simplified the example here and it works great: https://codepen.io/maxkuhlmay/pen/xxoLREL
I removed the after Pseudo class and moved the css for changing the background directly to the input, when its checked. I also dont need a cubic bezier to match our figma desings.
Thanks and Cheers 🙂