Skip to content

Instantly share code, notes, and snippets.

@jamesslock
Created November 4, 2012 12:54
Show Gist options
  • Save jamesslock/4011794 to your computer and use it in GitHub Desktop.
Save jamesslock/4011794 to your computer and use it in GitHub Desktop.
.btn {
border: 1px solid #bfbfbf;
background: #f6f6f6;
// Typography
font-size: 1em;
text-shadow: 0px 1px 0px rgba(255,255,255,1.0);
color: #d0d0d0;
// CSS3 Elements
@include rounded(3px);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 1), 0px 1px 0px 0px rgba(255, 255, 255, 1);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 1), 0px 1px 0px 0px rgba(255, 255, 255, 1);
@include css-transition(all, 0.2s, ease-in-out);
> span {
padding: $btn-padding;
}
i {
@include rounded(2px 0 0 2px);
border-right: 1px solid #bfbfbf;
}
> *:only-child {
@include rounded(2px);
border-right: 0;
}
span + i {
border-right: 0;
border-left: 1px solid #bfbfbf;
@include rounded(0 2px 2px 0);
}
&:hover {
background: #fefefe;
@include css-transition(all, 0.2s, ease-in-out);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
i {
background: #fefefe;
color: #93c5ec;
@include css-transition(all, 0.2s, ease-in-out);
}
}
&:active {
background: #f6f6f6;
-webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 1), inset 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 1), inset 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
@include css-transition(all, 0.2s, ease-in-out);
i {
background: #fefefe;
@include css-transition(all, 0.2s, ease-in-out);
}
> *:only-child {
background: transparent;
color: #d0d0d0;
}
}
}
.btn-group {
a {
border-left: 0;
margin-left: -5px;
@include rounded(0);
&:first-child {
margin-left: 0;
border-left: 1px solid #bfbfbf;
@include rounded(3px 0 0 3px);
}
&:last-child {
@include rounded(0 3px 3px 0);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment