Question

I was wondering how to make a button like this:

http://i43.tinypic.com/e21b7.png

The main problem, is NOT a problem. Although, I am not sure how to make it with a custom image at the right, as well as that nice border. (CSS)

Can someone help me?

Kindest Regards

Answer 1

Why aren’t I working? You can use this example to see how you might do it. Don’t just use this code – It’s a little big, not particularly efficient, and has only been tested in webkit. This could be a disaster in IE, Opera, Firefox, who knows. You’d need to use CSSPie and more vendor prefixes to get this more browser compliant, and that might be a distaster in itself. It’s a lot of code for a button.

At any rate, you can get the idea of how it’s done from this.

jsfiddle

Code:

html

<div id="btn">
    <p>200 <span>cr</span></p>
    <span class="plus">+</span>
</div>

css

html {
    height: 100%;
    font-family: sans-serif;
}

body {
    height: 100%;
    color: #fff;
    background: #505050;
    background-attachment: fixed;
    background: -webkit-gradient(linear, top, bottom, from(#09465d), to(#0f536e));
    background: -webkit-linear-gradient( 90deg, #09465d, #0f536e);
    background: -moz-linear-gradient(    90deg, #09465d, #0f536e);
    background: linear-gradient(         90deg, #09465d, #0f536e);
}

#btn {
    font-size: 13px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.9);
    margin: 20px;
    background: -webkit-gradient(linear, top, bottom, from(#1d4763), to(#215f86));
    background: -webkit-linear-gradient( 90deg, #1d4763, #215f86);
    background: -moz-linear-gradient(    90deg, #1d4763, #215f86);
    background: linear-gradient(         90deg, #1d4763, #215f86);
    overflow: hidden;
    display: inline-table;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
    border-radius: 3px;
    cursor: pointer;
}

#btn:hover {
    background: -webkit-gradient(linear, top, bottom, from(#19405a), to(#1d587d));
    background: -webkit-linear-gradient( 90deg, #19405a, #1d587d);
    background: -moz-linear-gradient(    90deg, #19405a, #1d587d);
    background: linear-gradient(         90deg, #19405a, #1d587d);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
    border-radius: 3px;
}

#btn:active {
    background: -webkit-gradient(linear, top, bottom, from(#19405a), to(#1d587d));
    background: -webkit-linear-gradient( 90deg, #19405a, #1d587d);
    background: -moz-linear-gradient(    90deg, #19405a, #1d587d);
    background: linear-gradient(         90deg, #19405a, #1d587d);
    -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
    border-radius: 3px;
}
    #btn p, span, p span {
        height: 30px;
        line-height: 30px;
        display: inline-block;
        margin: 0;
    }

    #btn p {
        padding: 0 12px;
        border-right: 1px solid rgba(0,0,0,.1);
    }

    #btn span.plus {
        padding: 0 12px;
        font-size: 16px;
        font-weight: bold;
        border-left: 1px solid rgba(255,255,255,.1);
    }

    #btn p span {
        font-size: 10px;
    }