Question

I’m trying to create a particular CSS button described here:

http://www.2shared.com/file/5131551/412bd8a8/Sans_titre-1_copie.html

Basically, it’s a button that fulfills the following conditions:

• the inside text is HTML content (it will contain text + images)
• it has rounded corners
• It changes colors when the mouse hovers it
• flexible width and height
• it’s a radio button that can be activated when clicked anywhere on the button.

Any idea or reference that could help me create it?

Answer 1

http://css-tricks.com/video-screencasts/17-sliding-doors-button/

This is a cool way of having a dynamic/flexible size for the button, and it wouldn’t be too hard to put whatever html you want inside of it… you’d have to play with the css a little more for coloring, but I think you should be fine with just a bit of creative css/html.

Start by building this button, and keep us posted about any css results you get!

ADDITION:

Don’t have the time to try it right now, but do a radio button, text and image(s) in the html with a span, use that link for the flexible dimensioning, and then hover color change in the css… again keep us posted!