CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-2
MLister
MLister

Reputation: 10300

Adding custom class based on Bootstrap CSS 2.3.2

I've included Bootstrap CSS, and now want to add a custom class in my own CSS file.

It is simply an exact copy of .btn-success with modified colors and class name only:

.btn-mine {
    color: #ffffff;
    background-color: #ff8d53;
    border-color: #ef8343;
}
.btn-mine:hover,
.btn-mine:focus,
.btn-mine:active,
.btn-mine.active,
.open .dropdown-toggle.btn-mine {
    color: #ffffff;
    background-color: #ea793e;
    border-color: #dc5930;
}
.btn-mine:active,
.btn-mine.active,
.open .dropdown-toggle.btn-mine {
    background-image: none;
}
.btn-mine.disabled,
.btn-mine[disabled],
fieldset[disabled] .btn-mine,
.btn-mine.disabled:hover,
.btn-mine[disabled]:hover,
fieldset[disabled] .btn-mine:hover,
.btn-mine.disabled:focus,
.btn-mine[disabled]:focus,
fieldset[disabled] .btn-mine:focus,
.btn-mine.disabled:active,
.btn-mine[disabled]:active,
fieldset[disabled] .btn-mine:active,
.btn-mine.disabled.active,
.btn-mine[disabled].active,
fieldset[disabled] .btn-mine.active {
    background-color: #ff8d53;
    border-color: #ff6314;
}
.btn-mine .caret {
    border-top-color: #fff;
}
.dropup .btn-mine .caret {
    border-bottom-color: #fff;
}

Unfortunately, this does not work, as shown here: http://jsfiddle.net/qG2n6/.

I know there are many 3rd-party Bootstrap button makers which can create buttons of any colors.

But I am more interested in knowing why my approach above does not work.

I copy all the styles that contains .btn-success in the original Bootstrap CSS, and only modify the colors and the class name, and I expected it to work.

What am I missing here?

Upvotes: 0

Views: 2124

Answers (2)

willi
willi

Reputation: 119

You will need to override the background-image as well. That is where the slight gradient of the buttons in Bootstrap 2.3.2 comes from. See here:

.btn-mine {
    color: #ffffff;
    background-image: none;
    background-color: #ff8d53;
    border-color: #ef8343;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

http://jsfiddle.net/qG2n6/1/

If you add background-image: none;, add the IE filter and alter the text shadow you will get your button. However, if you want a gradient to match the style of your version of Bootstrap you will need you own CSS gradient. You can use this tool to make one of your own:

http://www.colorzilla.com/gradient-editor/

Which might look something like this:

.btn-mine {
    color: #ffffff;
    border-color: #dc5930;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background: #ff8d53;
    background: -moz-linear-gradient(top,  #ff8d53 0%, #ff732d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8d53), color-stop(100%,#ff732d));
    background: -webkit-linear-gradient(top,  #ff8d53 0%,#ff732d 100%);
    background: -o-linear-gradient(top,  #ff8d53 0%,#ff732d 100%);
    background: -ms-linear-gradient(top,  #ff8d53 0%,#ff732d 100%);
    background: linear-gradient(to bottom,  #ff8d53 0%,#ff732d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8d53', endColorstr='#ff732d',GradientType=0 );
    background-repeat: repeat-x;
}

http://jsfiddle.net/qG2n6/3/

Upvotes: 1

majorhavoc
majorhavoc

Reputation: 2415

.btn-success contains 

.btn-success {
background-color: #5BB75B;
background-image: linear-gradient(to bottom, #62C462, #51A351);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

While your class contains just some border and background color

Upvotes: 1

Related Questions