Skip to content

Instantly share code, notes, and snippets.

@iansoper
Created May 26, 2011 20:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iansoper/994060 to your computer and use it in GitHub Desktop.
Save iansoper/994060 to your computer and use it in GitHub Desktop.
CSS3 Button with Background image and transparent gradient
.button.mesh {
font-size: 18px;
line-height: 18px;
font-family: "BPreplayBold",Helvetica,Arial,sans-serif;
text-shadow: 0 1px 1px #ffffff;
letter-spacing: 0;
color: #333333;
height: auto;
margin: 0 10px 0 0;
padding: 7px 15px 10px 15px;
-webkit-appearance: none;
display: inline-block;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #1c4f74;
text-decoration: none;
box-shadow: inset 0px 0px 0px 1px #c8e5f9 , 1px 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: inset 0px 0px 0px 1px #c8e5f9 , 1px 1px 2px rgba(0,0,0,.3);
-webkit-box-shadow: inset 0px 0px 0px 1px #c8e5f9 , 1px 1px 2px rgba(0,0,0,.3);
background-color: #7cb6e0;
background: -moz-linear-gradient(top, #7cb6e0, #539fd6);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7cb6e0), color-stop(1, #349fea));
background: #e5f2f7,url(../images/button-mesh-bg.png) repeat;
background: -moz-linear-gradient(top, #e5f2f7 0%, #f0f9fa 4%, #f6fbfe 39%, #a8cfea 100%),url(../images/button-mesh-bg.png) repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5f2f7), color-stop(4%, #f0f9fa), color-stop(39%, #f6fbfe), color-stop(100%, #a8cfea)),url(../images/button-mesh-bg.png) repeat;
background: -webkit-linear-gradient(top, #e5f2f7 0%, #f0f9fa 4%, #f6fbfe 39%, #a8cfea 100%),url(../images/button-mesh-bg.png) repeat;
background: -o-linear-gradient(top, #e5f2f7 0%, #f0f9fa 4%, #f6fbfe 39%, #a8cfea 100%),url(../images/button-mesh-bg.png) repeat;
background: -ms-linear-gradient(top, #e5f2f7 0%, #f0f9fa 4%, #f6fbfe 39%, #a8cfea 100%),url(../images/button-mesh-bg.png) repeat;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5f2f7', endColorstr='rgb(168, 207, 234, .5)',GradientType=0 );
background: linear-gradient(top, #e5f2f7 0%, #f0f9fa 4%, #f6fbfe 39%, #a8cfea 100%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment