Adding custom class based on Bootstrap CSS 2.3.2 - css

Question

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?

Answer 1

.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

Answer 2

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/