@mixin pretty-buttons($color, $background, $text-shadow: none) { color: $color; @include gradient-vertical(lighten($background, 5%), darken($background, 5%), 0%, 100%); border-color: darken($background, 10%); border-bottom-color: darken($background, 20%); text-shadow: $text-shadow; @include box-shadow(inset 0 1px 0 rgba(255, 255, 255, .1)); &:hover, &:focus, &:active, &.active { @include gradient-vertical(darken($background, 0), darken($background, 10%), 0%, 100%); border-color: darken($background, 20%); color: $color; } &.disabled, &[disabled], fieldset[disabled] & { &, &:hover, &:focus, &:active, &.active { background-color: $background; border-color: darken($background, 5%); } } } .btn { &.btn-default { @include pretty-buttons($btn-default-color, $btn-default-bg); } &.btn-primary { @include pretty-buttons($btn-primary-color, $btn-primary-bg); } &.btn-success { @include pretty-buttons($btn-success-color, $btn-success-bg); } &.btn-info { @include pretty-buttons($btn-info-color, $btn-info-bg); } &.btn-warning { @include pretty-buttons($btn-warning-color, $btn-warning-bg); } &.btn-danger { @include pretty-buttons($btn-danger-color, $btn-danger-bg); } &.btn-inverse { @include pretty-buttons(white, #474949); } } .btn-outline { background-color: transparent; background-image: none !important; color: inherit; transition: all .5s; } .btn-default.btn-outline { color: #999; } .btn-primary.btn-outline { color: #428bca; } .btn-success.btn-outline { color: #5cb85c; } .btn-info.btn-outline { color: #5bc0de; } .btn-warning.btn-outline { color: #f0ad4e; } .btn-danger.btn-outline { color: #d9534f; } .btn-primary.btn-outline:hover, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover { color: #fff; }