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
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>
Try this: http://www.cssbuttongenerator.com/
