Skip to content

Instantly share code, notes, and snippets.

@danielpietzsch
Created May 23, 2011 05:34
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 danielpietzsch/986270 to your computer and use it in GitHub Desktop.
Save danielpietzsch/986270 to your computer and use it in GitHub Desktop.
CSS Button blueprint
input[type=submit],
input[type=button] {
background-color: #2066B1;
border: 1px solid #3D3D3D;
color: #EEE;
padding: 0px 10px;
margin-right: 10px;
font-size: 0.85em;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
min-width: 75px;
height: 22px;
width: auto;
cursor: pointer;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F85EA), to(#165189));
background: -moz-linear-gradient(top, #2F85EA, #165189);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2F85EA', endColorstr='#165189');
}
input[type=submit]:hover,
input[type=button]:hover,
input[type=submit]:focus,
input[type=button]:focus {
background-color: #2F85EA;
border-color: #3D3D3D;
color: #FFF;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3F95FA), to(#266199));
background: -moz-linear-gradient(top, #2F85EA, #165189);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2F85EA', endColorstr='#165189');
}
input[type=submit]:active,
input[type=button]:active {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#266199), to(#3F95FA));
background: -moz-linear-gradient(top, #266199, #3F95FA);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#266199', endColorstr='#3F95FA');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment