Created
November 6, 2012 21:50
-
-
Save darrentorpey/4027825 to your computer and use it in GitHub Desktop.
A CodePen by Darren Torpey. PB Buttons
This file contains 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
| @import "compass" | |
| // == BUTTONS == | |
| $g_button_colors: 'blue', 'green', 'lightblue', 'silver' | |
| // ======= | |
| // Helpers | |
| // ------- | |
| =button_color($text_color: false, $text_shadow: false, $bg_light: false, $bg_dark: false, $bg_default: $bg_dark, $border: false) | |
| @if $text_color | |
| color: $text_color | |
| &:visited | |
| color: $text_color | |
| @if $text_shadow | |
| text-shadow: 0 1px 1px $text_shadow | |
| @if $border | |
| border: solid 1px $border | |
| @if $bg_default | |
| background: $bg_default | |
| background: -webkit-gradient(linear, left top, left bottom, from($bg_light), to($bg_dark)) | |
| background: -moz-linear-gradient(top, $bg_light, $bg_dark) | |
| =specify_buttons | |
| @each $color in $g_button_colors | |
| &.btn_#{$color}_square | |
| @extend .btn_#{$color}_square | |
| &.btn_#{$color}_pill | |
| @extend .btn_#{$color}_pill | |
| &.ecard_button | |
| @extend .ecard_button | |
| &.paper_blue_button | |
| @extend .paper_blue_button | |
| &.btn_big_green | |
| @extend .btn_big_green | |
| // ====== | |
| // Shapes | |
| // ------ | |
| =btn_button | |
| display: inline-block | |
| outline: none | |
| cursor: pointer | |
| text-align: center | |
| text-decoration: none | |
| font: bold 12px/100% Arial, sans-serif | |
| padding: .5em 1em | |
| -webkit-border-radius: .4em | |
| -moz-border-radius: .4em | |
| border-radius: .4em | |
| -webkit-box-shadow: 0 1px 3px rgba(250, 250, 250, 0.9) | |
| -moz-box-shadow: 0 1px 3px rgba(250, 250, 250, 0.9) | |
| box-shadow: 0 1px 3px rgba(250, 250, 250, 0.9) | |
| -webkit-font-smoothing: subpixel-antialiased | |
| &:hover | |
| text-decoration: none | |
| &:active | |
| -webkit-box-shadow: 0 1px 3px rgba(250, 250, 250, 0.3) | |
| -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) | |
| box-shadow: 0 1px 3px rgba(250, 250, 250, 0.7) | |
| -moz-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.4) | |
| -webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.4) | |
| box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.4) | |
| .btn_button | |
| +btn_button | |
| =btn_pill | |
| display: inline-block | |
| outline: none | |
| cursor: pointer | |
| text-align: center | |
| text-decoration: none | |
| font: 500 11px Helvetica, sans-serif | |
| line-height: 11px | |
| text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) | |
| padding: .6em 1em | |
| -webkit-border-radius: 2em | |
| -moz-border-radius: 2em | |
| border-radius: 2em | |
| -webkit-box-shadow: 0 1px 3px rgba(250, 250, 250, 0.9) | |
| -moz-box-shadow: 0 1px 3px rgba(250, 250, 250, 0.9) | |
| box-shadow: 0 1px 3px rgba(250, 250, 250, 0.9) | |
| -webkit-font-smoothing: subpixel-antialiased | |
| &:hover | |
| text-decoration: none | |
| &.unclickable | |
| cursor: default | |
| &:not([disabled]):not(.unclickable) | |
| &:active | |
| -webkit-box-shadow: 0 1px 3px rgba(250, 250, 250, 0.3) | |
| -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) | |
| box-shadow: 0 1px 3px rgba(250, 250, 250, 0.7) | |
| -moz-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.4) | |
| -webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.4) | |
| box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.4) | |
| .btn_pill | |
| +btn_pill | |
| // ====== | |
| // Colors | |
| // ------ | |
| =btn_green | |
| +button_color($text_color: #fff, $text_shadow: rgba(0, 0, 0, 0.4), $border: #618d3b, $bg_default: #93b95c, $bg_light: #93b95c, $bg_dark: #6f9b46) | |
| &:hover | |
| +button_color($text_color: #fff, $bg_light: #86ab51, $bg_dark: #638c3d) | |
| &:active | |
| +button_color($text_color: #e6ecd9, $border: #45581b, $bg_light: #7a9d48, $bg_dark: #567a35) | |
| .btn_green | |
| +btn_green | |
| .btn_blue | |
| +button_color($text_color: #fff, $text_shadow: rgba(0, 0, 0, 0.4), $border: #376788, $bg_default: #5087ae, $bg_light: #5087ae, $bg_dark: #376788) | |
| &:hover | |
| +button_color($text_color: #fff, $bg_light: #487a9e, $bg_dark: #305b78) | |
| &:active | |
| +button_color($text_color: #e6ecd9, $border: #2a526d, $bg_light: #406f91, $bg_dark: #284f69) | |
| .btn_lightblue | |
| +button_color($text_color: #174d6a, $text_shadow: rgba(250, 250, 250, 0.6), $border: #839ead, $bg_default: #c8dce7, $bg_light: #c8dce7, $bg_dark: #9fb9c7) | |
| &:hover | |
| +button_color($text_color: #174d6a, $bg_light: #b9d0dd, $bg_dark: #95b0bf) | |
| &:active | |
| +button_color($text_color: #1d506b, $border: #839ead, $bg_light: #a9c3d1, $bg_dark: #89a5b5) | |
| .btn_silver | |
| +button_color($text_color: #333, $text_shadow: rgba(250, 250, 250, 0.6), $border: #d5d5d5, $bg_light: #f6f7f8, $bg_default: #dbdbdb, $bg_dark: #e4e6e7) | |
| &:not([disabled]):not(.unclickable) | |
| &:hover | |
| +button_color($text_color: #333, $bg_default: #cbcbcb, $bg_light: #eceeef, $bg_dark: #d8dadb) | |
| &:active | |
| +button_color($text_color: #1a1a1a, $border: #839ead, $bg_light: #dedede, $bg_dark: #c7c9ca) | |
| .btn_tan | |
| $_color: #cdd6c1 | |
| +button_color($text_color: #333, $text_shadow: rgba(250, 250, 250, 0.6), $border: adjust-color($_color, $lightness: -20%), $bg_light: $_color, $bg_default: $_color, $bg_dark: $_color) | |
| &:not([disabled]):not(.unclickable) | |
| &:hover | |
| $_h_color: adjust-color($_color, $lightness: -10%) | |
| +button_color($text_color: #333, $bg_default: $_h_color, $bg_light: $_h_color, $bg_dark: $_h_color) | |
| &:active | |
| $_a_color: adjust-color($_color, $lightness: 10%) | |
| +button_color($text_color: #1a1a1a, $border: $_a_color, $bg_light: $_a_color, $bg_dark: $_a_color) | |
| // ============ | |
| // Base Buttons | |
| // ------------ | |
| .btn_silver_pill | |
| @extend .btn_pill | |
| @extend .btn_silver | |
| .btn_silver_square | |
| @extend .btn_button | |
| @extend .btn_silver | |
| .btn_green_pill | |
| +btn_pill | |
| +btn_green | |
| .btn_blue_pill | |
| @extend .btn_pill | |
| @extend .btn_blue | |
| font-weight: bold | |
| .btn_green_square | |
| +btn_button | |
| +btn_green | |
| .btn_lightblue_pill | |
| @extend .btn_pill | |
| @extend .btn_lightblue | |
| .btn_tan_square | |
| @extend .btn_button | |
| @extend .btn_tan | |
| // ============== | |
| // Common Buttons | |
| // -------------- | |
| .ecard_button | |
| @extend .btn_lightblue_pill | |
| img | |
| margin-bottom: -2px | |
| &.right_img | |
| img | |
| margin-right: -2px | |
| &.left_img | |
| img | |
| margin-left: -2px | |
| .btn_big_green | |
| @extend .btn_green_square | |
| font-size: 14px | |
| padding: .6em 1em | |
| +border-radius(.5em) | |
| =btn_green_square | |
| @extend .btn_button | |
| @extend .btn_green | |
| =paper_blue_button | |
| @extend .btn_button | |
| @extend .btn_blue | |
| =btn_blue_pill | |
| @extend .btn_pill | |
| @extend .btn_blue | |
| =btn_square_disabled_by_class | |
| &.disabled | |
| @extend .btn_disabled_square | |
| cursor: default | |
| &:hover | |
| @extend .btn_disabled_square | |
| &:active | |
| @extend .btn_disabled_square | |
| .paper_blue_button | |
| +paper_blue_button | |
| +btn_square_disabled_by_class | |
| .btn_disabled_square | |
| color: #a3a3a3 | |
| text-shadow: 0 1px 1px rgba(250,250,250,.9) | |
| box-shadow: inset 1px 2px rgba(0,0,0,.9) | |
| box-shadow: inset 0 1px 1px 0px rgba(0,0,0,.3) | |
| background: #d8d8d8 | |
| background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e9eaea)) | |
| border: solid 1px rgba(100, 100, 100, 0.1) | |
| .facebook_button | |
| background: transparent image-url('buttons/btn_facebook_share_52x26.jpg') no-repeat top left | |
| text-indent: -9999px | |
| width: 52px | |
| height: 26px | |
| display: inline-block | |
| margin: | |
| left: 5px | |
| bottom: 10px | |
| font-size: 14px | |
| padding: 4px 8px | |
| html>body & | |
| *margin-bottom: -5px | |
| // == END BUTTONS == |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment