Skip to content

Instantly share code, notes, and snippets.

@maciejczyzewski
Created April 15, 2013 20:30
Show Gist options
  • Save maciejczyzewski/5391052 to your computer and use it in GitHub Desktop.
Save maciejczyzewski/5391052 to your computer and use it in GitHub Desktop.
Simple implementation of CSS buttons
.btn {
background-color: #e9e9e9;
border: 1px solid #cacaca;
border-bottom-color: #c3c3c3;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
display: inline-block;
*display: inline;
*zoom: 1;
padding: 6px 14px;
margin-bottom: 0;
font-size: 12px;
font-weight: 700;
-webkit-border-radius: 1px;
border-radius: 1px;
line-height: 17px;
text-align: center;
vertical-align: middle;
cursor: pointer;
*border: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
outline: 0;
*margin-left: .3em;
}
.btn,
.btn:hover,
.btn:focus,
.btn:active {
color: #444;
text-shadow: 0 1px 0 #f6f6f6;
}
.btn:hover,
.btn:focus {
background-color: #f3f3f3;
}
.btn:active,
.btn.active,
.btn:hover:active {
border-color: #a9a9a9;
background-color: #dfdfdf;
-webkit-box-shadow: inset 0 1px 3px #d0d0d0;
box-shadow: inset 0 1px 3px #d0d0d0;
}
.btn.btn-link,
.netflam-footer li a { color: #e9e9e9 }
.btn.btn-link:hover,
.netflam-footer li a { color: #fff }
.btn:first-child { *margin-left: 0 }
.btn:hover,
.btn:focus {
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.15);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.15);
}
.btn.disabled,
.btn[disabled] {
cursor: default;
pointer-events: none;
opacity: .8;
-ms-filter: alpha(Opacity=80);
filter: alpha(opacity=80);
-webkit-box-shadow: none;
box-shadow: none;
}
.btn [data-icon]:before,
.btn [class^=d-icon-]:before,
.btn [class*=" d-icon-"]:before {
font-size: 15px;
line-height: 1.2em;
vertical-align: top;
}
.btn-dropdown { padding-right: 35px }
.btn-dropdown .dropdown-carrot {
border-top-color: #444;
right: 15px;
top: 12px;
vertical-align: middle;
margin-left: 10px;
}
.btn-primary {
background-color: #3274d1;
border: 1px solid #2458a2;
border-bottom-color: #215195;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
color: #fff;
text-shadow: 0 -1px 0 #265daa;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: #437fd5;
}
.btn-primary:active,
.btn-primary.active,
.btn-primary:hover:active {
border-color: #183b6b;
background-color: #2c6ac3;
-webkit-box-shadow: inset 0 1px 3px #265daa;
box-shadow: inset 0 1px 3px #265daa;
}
.btn-primary.btn-link { color: #3274d1 }
.btn-primary.btn-link:hover { color: #5c90da }
.btn-facebook {
background-color: #2d4785;
border: 1px solid #1e2f57;
border-bottom-color: #1a284c;
}
.btn-facebook,
.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active {
color: #fff;
text-shadow: 0 -1px 0 #20335f;
}
.btn-facebook:hover,
.btn-facebook:focus {
background-color: #324f94;
}
.btn-facebook:active,
.btn-facebook.active,
.btn-facebook:hover:active {
border-color: #0d1426;
background-color: #283f76;
-webkit-box-shadow: inset 0 1px 3px #20335f;
box-shadow: inset 0 1px 3px #20335f;
}
.btn-facebook.btn-link { color: #2d4785 }
.btn-facebook.btn-link:hover { color: #3a5bab }
.btn-twitter {
background-color: #0099ec;
border: 1px solid #0071af;
border-bottom-color: #0067a0;
}
.btn-twitter,
.btn-twitter:hover,
.btn-twitter:focus,
.btn-twitter:active {
color: #fff;
text-shadow: 0 -1px 0 #0078b9;
}
.btn-twitter:hover,
.btn-twitter:focus {
background-color: #01a6ff;
}
.btn-twitter:active,
.btn-twitter.active,
.btn-twitter:hover:active {
border-color: #00466d;
background-color: #008cd8;
-webkit-box-shadow: inset 0 1px 3px #0078b9;
box-shadow: inset 0 1px 3px #0078b9;
}
.btn-twitter.btn-link { color: #0099ec }
.btn-twitter.btn-link:hover { color: #20b1ff }
.btn-googleplus {
background-color: #e13800;
border: 1px solid #a42900;
border-bottom-color: #952500;
}
.btn-googleplus,
.btn-googleplus:hover,
.btn-googleplus:focus,
.btn-googleplus:active {
color: #fff;
text-shadow: 0 -1px 0 #ae2b00;
}
.btn-googleplus:hover,
.btn-googleplus:focus {
background-color: #f53d00;
}
.btn-googleplus:active,
.btn-googleplus.active,
.btn-googleplus:hover:active {
border-color: #621800;
background-color: #cd3300;
-webkit-box-shadow: inset 0 1px 3px #ae2b00;
box-shadow: inset 0 1px 3px #ae2b00;
}
.btn-googleplus.btn-link { color: #e13800 }
.btn-googleplus.btn-link:hover { color: #ff4f15 }
.btn-huge {
padding: 12px 18px;
font-size: 15px;
}
.btn-large {
padding: 9px 14px;
font-size: 15px;
}
.btn-large [class^=icon-] { margin-top: 2px }
.btn-small {
padding: 3px 9px;
font-size: 12px;
}
.btn-small [class^=icon-] { margin-top: 0 }
.btn-block {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.btn-block+.btn-block { margin-top: 5px }
.btn-group .btn-half {
display: block;
float: left;
width: 49%;
padding-left: 0;
padding-right: 0;
}
.btn-group .btn-half:nth-child(2) { margin-left: 2% }
button.btn,
input[type=submit].btn {
*padding-top: 3px;
*padding-bottom: 3px;
}
button.btn::-moz-focus-inner,
input[type=submit].btn::-moz-focus-inner {
padding: 0;
border: 0;
}
button.btn.btn-large,
input[type=submit].btn.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
}
button.btn.btn-small,
input[type=submit].btn.btn-small {
*padding-top: 3px;
*padding-bottom: 3px;
}
button.btn.btn-mini,
input[type=submit].btn.btn-mini {
*padding-top: 1px;
*padding-bottom: 1px;
}
.btn.btn-link,
.btn.btn-link:active,
.btn.btn-link:hover,
.netflam-footer li a {
background-color: transparent;
background-image: none;
-webkit-box-shadow: none;
box-shadow: none;
border-color: transparent;
}
.btn.btn-link,
.netflam-footer li a {
text-transform: none;
cursor: pointer;
color: #bbb;
font-weight: 500;
padding: 0;
}
.btn.btn-link:hover,
.netflam-footer li a:hover { color: #3274d1 }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment