Skip to content

Instantly share code, notes, and snippets.

@adrusi
Created January 19, 2011 22:12
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 adrusi/786996 to your computer and use it in GitHub Desktop.
Save adrusi/786996 to your computer and use it in GitHub Desktop.
$button-top-left-border: #cccccc
$button-bottom-right-border: #bbbbbb
$button-top-background: #f9f9f9
$button-bottom-background: #e3e3e3
$button-text-color: #000000
$button-active-top-left-border: #555555
$button-active-bottom-right-border: #444444
$button-active-top-background: #666666
$button-active-bottom-background: #7c7c7c
$button-active-text-color: #ffffff
$button-selector: ".button"
$button-set-selector: ".buttonset"
// OPTIONS
// =====================================
// "unround" : suppress rounded corners
// for IE on active buttons
// in buttonsets
//
// "uncolor" : keep the border color
// the same for active
// buttons in buttons sets
// in IE
$button-set-ie-compenstation: "unround"
body
min-height: 100%
padding: 10px
@import vars
#{$button-selector}
border:
top: 1px solid $button-top-left-border
bottom: 1px solid $button-bottom-right-border
left: 0
right: 0
background: $button-top-background
display: inline-block
/* This is necissary for button tags which for some reason don't use the standard box model...
-webkit-box-sizing: content-box
-moz-box-sizing: content-box
box-sizing: content-box
/* If the element is an anchor tag, which is very likely
text-decoration: none
overflow: visible
min-width: 100px
height: 25px !important
line-height: 26px
font-size: 12px
text-align: center
padding: 0 5px
font-family: Helvetica, Arial, sans-serif
position: relative
z-index: 1
margin: 5px
color: $button-text-color
&:before
content: ""
display: block
position: absolute
top: 50%
bottom: 0
left: 0
right: 0
margin-top: -1px
background: $button-bottom-background
border-top: 3px solid mix($button-top-background, $button-bottom-background)
z-index: -1
&:after
content: ""
display: block
position: absolute
top: 0
bottom: 0
left: -1px
right: -1px
border:
top: 0
bottom: 0
left: 1px solid $button-top-left-border
right: 1px solid $button-bottom-right-border
&.important
font-weight: bold
#{$button-selector}:active
background: $button-active-top-background
color: $button-active-text-color
outline: 0
border:
top: 1px solid $button-active-top-left-border
bottom: 1px solid $button-active-bottom-right-border
&:before
border-top-color: mix($button-active-top-background, $button-active-bottom-background)
background: $button-active-bottom-background
&:after
border:
left: 1px solid $button-active-top-left-border
right: 1px solid $button-active-bottom-right-border
#{$button-set-selector}
margin: 5px
margin-right: 9px
display: inline-block
#{$button-selector}
margin: 0
margin-right: -4px
#{$button-selector}:active
z-index: 2
&:after
right: 0
left: 0
&:first-child:after
left: -1px
&:last-child:after
right: -1px
@import vars
#{$button-selector}:focus
outline: 0
#{$button-set-selector}
*zoom: 1
*display: inline
@if $button-set-ie-compenstation == "uncolor"
#{$button-selector}:active
z-index: 1
border:
top: 1px solid $button-top-left-border
bottom: 1px solid $button-bottom-right-border
&:after
border:
left: 1px solid $button-top-left-border
right: 1px solid $button-bottom-right-border
@if $button-set-ie-compenstation == "unround"
#{$button-selector}:active:after
left: 0
right: 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment