CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3sass
Harsha M V
Harsha M V

Reputation: 54949

Bootstrap - Modify Button Style

Is there a way to change the Bootstrap Styles - Hover and Border Properties via the Sass files?

I dont see any properties to edit in the Variables file

//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.

$btn-font-weight:                normal !default;

$btn-default-color:              #969696 !default; // #333 !default;
$btn-default-bg:                 #e7e7e7 !default; // #fff !default;
$btn-default-border:             #d4d4d4 !default; // #ccc !default;

$btn-primary-color:              #fff !default;
$btn-primary-bg:                 $brand-primary !default;
$btn-primary-border:             darken($btn-primary-bg, 5%) !default;

$btn-success-color:              #fff !default;
$btn-success-bg:                 $brand-success !default;
$btn-success-border:             darken($btn-success-bg, 5%) !default;

$btn-info-color:                 #fff !default;
$btn-info-bg:                    $brand-info !default;
$btn-info-border:                darken($btn-info-bg, 5%) !default;

$btn-warning-color:              #fff !default;
$btn-warning-bg:                 $brand-warning !default;
$btn-warning-border:             darken($btn-warning-bg, 5%) !default;

$btn-danger-color:               #fff !default;
$btn-danger-bg:                  $brand-danger !default;
$btn-danger-border:              darken($btn-danger-bg, 5%) !default;

$btn-link-disabled-color:        $gray-light !default;

Upvotes: 0

Views: 974

Answers (1)

Aravind
Aravind

Reputation: 609

Use SASS @extend keyword if your applying styles from a SASS file.

btn
   @extend .button-style //predefined style
   border: 1px solid blue
&:hover
   color: red

Note: Don't forget to import the SASS file in your document.

Upvotes: 2

Related Questions