CODEWITHSUNDEEP
htmlcssbutton
Kyberias
Kyberias

Reputation: 1251

How to implement this button in HTML / CSS?

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.

Upvotes: 1

Views: 1920

Answers (3)

No Results Found
No Results Found

Reputation: 102745

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;   
}

Upvotes: 5

Salil
Salil

Reputation: 47482

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'

Upvotes: 1

iHaveacomputer
iHaveacomputer

Reputation: 1437

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.

Upvotes: 1

Related Questions