.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 13px; line-height: $baseLineHeight; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid #BBB; color: $style_color; @include border-radius($baseBorderRadius); @include box-shadow(inset 0 1px 0 rgba(255,255,255,.2)); @include linear-gradient(#f1f1f1, #e1e1e1); text-shadow: 0 1px 1px #FFF; text-decoration: none; &.hover, &:hover { color: $style_color; background: #f1f1f1; border-color: #AAA; text-decoration: none; @include linear-gradient(#fAfAfA, #f1f1f1); } &.focus, &:focus { text-decoration: none; @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15)); } &.active, &:active { background-image: none; outline: 0; text-decoration: none; @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15)); } &.disabled, &[disabled] { cursor: default; background-image: none; @include opacity(65); @include box-shadow(none); } &.btn-primary { color: #FFF; border-color: #189; text-shadow: 0 1px 1px #189; @include linear-gradient(#4AC, #289); &.hover, &:hover, &.disabled, &[disabled] { color: #FFF; background: #389; } } &.btn-success { color: #FFF; border-color: #1A1; text-shadow: 0 1px 1px #FFF; text-shadow: 0 1px 1px #181; @include linear-gradient(#62C452, #51a351); &.hover, &:hover, &.disabled, &[disabled] { color: #FFF; background: #2A2; } } &.btn-danger { color: #FFF; text-shadow: 0 1px 1px #811; border-color: #BD362F; @include linear-gradient(#EE5F5B, #BD362F); &.hover, &:hover, &.disabled, &[disabled] { color: #FFF; background: #A22; } } &.btn-new { @extend .btn-success; } &.btn-create { @extend .wide; @extend .btn-success; } &.btn-save { @extend .wide; @extend .btn-primary; } &.btn-close, &.btn-remove { @extend .btn-danger; } &.btn-cancel { float: right; } &.wide { padding-left: 20px; padding-right: 20px; } &.btn-small { padding: 2px 10px; font-size: 12px; } &.btn-tiny { font-size: 11px; padding: 2px 6px; line-height: 16px; margin: 2px; } &.grouped { margin-right: 7px; float: left; } }