Fancy Radio Button

talmand

• 27815
• 6
• 1

A custom radio button that has a glowing effect for the hover and checked state. Heavy use of CSS3 (gradients everywhere!) for the styling, which can be easily changed to suit different needs.

Used a label tag for hover/click duties and hid the input. There are two spans inside the label to provide the radio part; outer is always visible and inner is the glow effect using opacity and transition. Then just your basic text.

Also used box-shadow with two shadows on the inset to give a soft bevel appearance.

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room