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
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
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
