A button suitable for giving stars to someone.
:hover - Subtle hover highlight. .stars-given - A highlight indicating you've already given a star. .stars-given:hover - Subtle hover highlight on top of stars-given styling. .disabled - Dims the button to indicate it cannot be used.
Styleguide 2.1.3.
States
Hover state
Focus state for keyboard and accessibility
Active state
Add the disabled
class to links and the disabled
attribute for button
elements.
.btn {
display: inline-block;
@include ie7-inline-block();
padding: 4px 14px;
margin-bottom: 0; // For input.btn
font-size: $baseFontSize;
line-height: $baseLineHeight;
*line-height: $baseLineHeight;
text-align: center;
vertical-align: middle;
cursor: pointer;
@include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid $btnBorder;
*border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken($btnBorder, 10%);
@include border-radius(4px);
@include ie7-restore-left-whitespace(); // Give IE7 some love
@include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)});
&:hover {
color: $grayDark;
text-decoration: none;
background-color: darken($white, 10%);
*background-color: darken($white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
background-position: 0 -15px;
// transition is only when going to hover, otherwise the background
// behind the gradient (there for IE<=9 fallback) gets mismatched
@include transition(background-position .1s linear);
}
// Focus state for keyboard and accessibility
&:focus {
@include tab-focus();
}
&.active,
&:active {
background-color: darken($white, 10%);
background-color: darken($white, 15%) \9;
background-image: none;
outline: 0;
@include box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
}
// Disabled state
&.disabled,
&[disabled] {
cursor: default;
background-color: darken($white, 10%);
background-image: none;
@include opacity(65);
@include box-shadow(none);
}
}