Please help me build this button

Question

Hi,

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!

Answer 2

I'd just like to say this is pretty messy. This is untested, but uses the smallest possible amount of elements. It's a four-way sliding door.

HTML:

<a href="your-url-here" class="button">
  <div class="inner-1">
    <div class="inner-2">
      <div class="inner-3">
        Your stuff
      </div>
    </div>
  </div>
</a>

CSS:

a.button {
  background: url('topleft-image-url') no-repeat top left;
  display: block;
  float: left;
}

  a.button .inner-1 { url('topright-image-url') no-repeat top right; }
  a.button .inner-2 { url('bottomright-image-url') no-repeat bottom right; }
  a.button .inner-3 {
    url('bottomleft-image-url') no-repeat bottom left;
    padding: 0.5em;
  }

  // You still need to re-speicify the extra attributes of background for browser compatibility
  a.button:hover { background: url('topleft-image-url-over') no-repeat top left; }

    a.button:hover .inner-1 { url('topright-image-url-over') no-repeat top right; }
    a.button:hover .inner-2 { url('bottomright-image-url-over') no-repeat bottom right; }
    a.button:hover .inner-3 { url('bottomleft-image-url-over') no-repeat bottom left; }

If you get rid of one of the size constraints (eg. width or height), you can drop two divs (ie. make a two-way sliding door).

With either technique you can optimise your image by creating a gif or png with enough transparency between the segments to exceed the maximum bounds of width and height your button will experience. One for each state, this would allow you to only require two images instead of eight.

With a bit of thought you could probably figure out how to merge both states into a single image too, using percentage- or pixel- based background positioning. This would allow you to simplify the CSS, too.