CODEWITHSUNDEEP
javascriptcssbutton
Gad
Gad

Reputation: 42306

CSS button with rounded corners that reacts to clicks

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:

Any idea or reference that could help me create it?

Upvotes: 1

Views: 513

Answers (2)

Aupajo
Aupajo

Reputation: 6055

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.

Upvotes: 0

Phil
Phil

Reputation:

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!

Upvotes: 1

Related Questions