I received an image of a button that I need to replicate on a website, but unfortunately, only the image was provided without any information about the font-family or size. Despite not being a designer or CSS expert, I attempted to create a CSS style that resembled the given image using CSS3.
.test
{
border-top: 1px solid;
background: #ebebeb;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#ebebeb));
background: -webkit-linear-gradient(top, #ebebeb, #ebebeb);
background: -moz-linear-gradient(top, #ebebeb, #ebebeb);
background: -ms-linear-gradient(top, #ebebeb, #ebebeb);
background: -o-linear-gradient(top, #ebebeb, #ebebeb);
padding: 5px 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #ebebeb 0 1px 0;
-moz-box-shadow: #ebebeb 0 1px 0;
box-shadow: #ebebeb 0 1px 0;
text-shadow: #ebebeb 0 1px 0;
color: #4d4c4d;
font-size: 12px;
font-family: font-family: Arial,sans-serif;
font-weight:lighter;
text-decoration: none;
vertical-align: middle;
}
However, I'm still struggling with getting the font size and background exactly right. Perhaps there are some CSS3 experts who can provide insight into what I might be missing to achieve an exact copy?
You can view my attempt on Fiddle here: http://jsfiddle.net/Fbpg6/