Created
April 15, 2013 20:30
-
-
Save maciejczyzewski/5391052 to your computer and use it in GitHub Desktop.
Simple implementation of CSS buttons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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