CODEWITHSUNDEEP
cssgradient
Asim Zaidi
Asim Zaidi

Reputation: 28284

CSS gradient from image

I had been given a few image from my advertisement department to put it on site for tabs etc. However I am sure that would slow down the rendering of page. So I thought I would do it in css. However after several trials I am unable to come close to the following images. I would appreciate any help with these two images.

Delete this question please I think I will have to work on this and then repost if I cant figure out something. Can you please vote on closing this question thank you

Upvotes: 0

Views: 272

Answers (2)

PenguinKenny
PenguinKenny

Reputation: 80

The two hexcodes for the top and bottom colours are #FF7F00 and #ED3400, respectively. You can then use the link that Chad von Nau provided and edit the border, rounding and text appropriately.

Here is what I came up with for your image.

<style type="text/css">
classname{
    -moz-box-shadow:inset 0px 1px 0px 0px #db8f4c;
    -webkit-box-shadow:inset 0px 1px 0px 0px #db8f4c;
    box-shadow:inset 0px 1px 0px 0px #db8f4c;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff8000), color-stop(1, #ed3300) );
    background:-moz-linear-gradient( center top, #ff8000 5%, #ed3300 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8000', endColorstr='#ed3300');
    background-color:#ff8000;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:21px;
    font-weight:bold;
    padding:11px 54px;
    text-decoration:none;
    text-shadow:-1px -1px 0px #ed3300;
}.classname:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ed3300), color-stop(1, #ff8000) );
    background:-moz-linear-gradient( center top, #ed3300 5%, #ff8000 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed3300', endColorstr='#ff8000');
    background-color:#ed3300;
}.classname:active {
    position:relative;
    top:1px;
}
</style>

Upvotes: 1

Chad von Nau
Chad von Nau

Reputation: 4404

Try this: http://www.cssbuttongenerator.com/

Upvotes: 0

Related Questions