How to implement this button in HTML / CSS?

Question

This is a button that has been originally implemented and styled in Silverlight.

How to implement this button in HTML/CSS? Note the different gradients in the border and the button background and also the rounder corners in the border. The border width should be adjustable but uniform size around the button.

The red colour in the example picture is page background, not part of the button.

Button screenshot http://i52.tinypic.com/2vsetlw.png

UPDATE: Forgot to mention, I would prefer a solution without images, ie. pure-css. Css3 is fine, I don't need to support IE6-8 for example.

Oh I've tried a bunch. It's pretty trivial without the border gradient. — Kyberias, Jun 03 '11 at 06:52
If everything else is trivial, see border gradients @ http://stackoverflow.com/q/2717127/353278 — Jeff, Jun 03 '11 at 07:14
Asking an honest question. Gets a down-vote. What is the matter with you people? — Kyberias, Jun 03 '11 at 07:16
@Kyberias I didn't downvote, and I think this is a genuine question... However it is customary to post some code that you've tried so that people can -debug- your code, instead of just writing it for you. Wesley's answer looks spot on to me though, perhaps you should give him the check. — Jeff, Jun 03 '11 at 07:21
There you go. Wesley rocks! :) Thank you for all the answers. — Kyberias, Jun 03 '11 at 07:25

score 5 · Accepted Answer · answered Jun 03 '11 at 07:10

I know it's not the most helpful thing to spoon-feed sometimes, but I had needed a break from work.

Demo: http://jsfiddle.net/wesley_murch/SzHQZ/

Looks nice in FF4 and Chrome, IE falls back to decent looking (though you could fix it with PIE).

Here's the CSS I used, I got the gradient code from some random online generator so it might not be optimal. There's too much contrast as well compared to your image, so just fine tune it.

<button>
    <span>
        Sign in
    </span>
</button>

button {
    border:0;
    padding:3px;
    background:#735544;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.18, #271D1B),
        color-stop(0.59, #735544)
        );
    background-image: -moz-linear-gradient(
        center bottom,
        #271D1B 18%,
        #735544 59%
        );
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;   
}

--- Needed this break to get markdown to behave...

button span {
    display:block;
    color:#fff;
    font:900 18px arial;
    text-transform:uppercase;
    padding:.35em 1.3em;
    background:#382B25;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.18, #382B25),
        color-stop(0.59, #C2A489)
        );
    background-image: -moz-linear-gradient(
        center bottom,
        #382B25 18%,
        #C2A489 59%
        );   
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;   
}

One more thing: I can certainly live with the but is there a way to get rid of it? — Kyberias, Jun 03 '11 at 07:27
The only way I can think of if you want to keep both gradients is some sort of gradient border, or possibly some `:after` or `:before` trickery. Jeff's link above might help you with the first one. — Wesley Murch, Jun 03 '11 at 07:30

score 1 · Answer 2 · answered Jun 03 '11 at 06:44

Looks like the boring version of http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba :)

you can take the example from there and just change the colors, probably want to replace

border-bottom: 1px solid #222;

with something like

border: 3px solid brown;

The example above uses an alpha-blended png for the gradient, but you can also go for css3 gradients, see http://css-tricks.com/examples/CSS3Gradient/ for a good cross-browser example.

Your examples did not take into account the border gradient. — Kyberias, Jun 03 '11 at 06:58

score 1 · Answer 3 · answered Jun 03 '11 at 06:46

Just save the image as a background

<input type="submit"  class="btnSqueareInput" name="commit" value="SIGN IN"/>

btnSqueareInput {
background:transparent url(../images/sqaure.png) no-repeat;
border:medium none;
color:#FFFFFF;
cursor:pointer;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
height:32px;
margin:0;
padding:0;
text-align:center;
text-decoration:none;
vertical-align:top;
width:79px;
}

where square.png is rge image of the button w/o 'SIGN IN'

Sorry, I would prefer a pure-css-solution without images. – Kyberias Jun 03 '11 at 06:49 — Kyberias, Jun 03 '11 at 06:49

How to implement this button in HTML / CSS?

3 Answers3