1

So I've been trying a whole bunch of things to change the color of my buttons in a bootstrap website. I've tried creating a class in the css and changing the background color there. I've tried using ids to change the background color, I've tried overriding .btn-primary, but that changes all of the buttons. I have more than 6 buttons to make more than 6 button colors, so I need to be able to do it without using the 6 existing button types. Does anyone know how I could do this?

The HTML:

<form action="index.html">
    <button type="submit" class="btn btn-primary btn-lg btn-block home" id="home">
        Home <span class="glyphicon glyphicon-home"></span>
    </button>
</form>

The CSS:

.home{
    background-color:#9b59b6;
}

Edit: Thank you all for your responses. They were all correct. However none of them fixed the issue. You know what did? Removing a lone / character that had somehow found its way into my code. Lesson learned: Check your code for other errors before blaming bootstrap and css.

Community
  • 1
  • 1
Sean Lev
  • 121
  • 1
  • 6
  • 1
    Some ideas: 1) What happens if you force your `background-color` with `!important`? Maybe your definition is too weak in the definition hierarchy? 2) Consider the LESS definitions and that your CSS may be rewritten (see [here](http://stackoverflow.com/questions/10659070/styling-twitter-bootstrap-buttons), comment of nalply) 3) What do you see if you chose "Insepct Element" with your browser? Where is the color definition acutally coming from? – peter_the_oak Mar 03 '15 at 23:11

2 Answers2

1

You can create new classes for your custom buttons like this:

<div class="btn btn-home">Home</div>

css:

.btn-home {
    background-color: #9b59b6;
    border-color: #333;
    color: #fff;
}

/* Change how it looks when hovered or clicked */

.btn-home:hover {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

.btn-home:active {
    background-color: red;
    border-color: #333;
    color: #fff;
}

Example

Jack
  • 2,741
  • 2
  • 24
  • 32
1

Simply you can make your own buttons something like btn-one btn-two btn-three

and style like like the following example 

.btn-one {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-one:hover,
.btn-one:focus,
.btn-one.focus,
.btn-one:active,
.btn-one.active,
.open > .dropdown-toggle.btn-one {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

and change the colors to your own needed colors

dyaa
  • 1,440
  • 18
  • 43