CODEWITHSUNDEEP
cssforms
Galichev Anton
Galichev Anton

Reputation: 360

How to create custom horizontal radio buttons with CSS?

I want to create radio buttons or other type of controls that will act like this:

[_value1_] [value2] [value3]

Value1 is selected, so it looks like pressed button or selected link (bold, no underline) and other elements are active buttons/links. When user select another value - state is changed. I can handle this event manually, question is - what plugin or existing css/js combination should I use to achieve this?

I am pretty sure that this type of controls have a name, but can't think out what is this. I have tried to search for custom style radio buttons, as functionality is the same, but failed. Also I have tried some other names such as switch buttons, but it's not what I want. It's also very similar to tabs, but tabs usually styled as something that require underline div attached. So I am looking for "radio button meet tabs" css/js solution.

Can you help me to name this control, if you know it's name, or find plugin/existing code that can help me to achieve my goal?

The question is not how to create this type of functionality myself, I can do it, but it's rather strange that there are no existing solutions and I want to help people in same situation, also may be existing solutions design can be better than I can invent myself, because I am not a designer.

Answer

This type of controls can be found as "Simplified CSS Tabs" or "CSS Mini Tabs", but they require some additional code to work as expected.

Also, this type of functionality can be found in Google as jQuery UI radio buttons transformed into a button set and Yahoo UI Button Control: Radio Buttons

Upvotes: 0

Views: 2701

Answers (1)

meteorainer
meteorainer

Reputation: 952

http://jqueryui.com/demos/button/#radio

works done for ya bud :)

Upvotes: 4

Related Questions