CODEWITHSUNDEEP
csstwitter-bootstrap
Mohamed Hussain
Mohamed Hussain

Reputation: 7703

Creating my Own Twitter Bootstrap button

I am developing a web app using twitter bootstrap, i want to create my own button with my own background, i don't want to use the already present buttons using btn-primary etc... but i want to create my own button with my own class. I want to use the core functionality of the btn class. so ideally my button will use the class=" btn btn-myPrimary".

I checked in variables.less and buttons.less, there only i am able to change the value of existing buttons such as btn-primary. i am not able create my own button something like btn-myPrimary.

Thanks in advance for any help.

Upvotes: 1

Views: 4962

Answers (2)

Jason Sperske
Jason Sperske

Reputation: 30416

If you can compile the less files then you can use this button mixin (from mixins.less):

// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
...

If you look at buttons.less you can see how they use it:

.btn-default {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
.btn-primary {
  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
// Warning appears as orange
.btn-warning {
  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
// Success appears as green
.btn-success {
  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
// Info appears as blue-green
.btn-info {
  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}

Upvotes: 7

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this ref links below

Link

Upvotes: 2

Related Questions