Btn are not getting the color - html

Question

I have a button with the following code, but the CSS below is not working
i.e. the color and size is not changing
CSS:
.btn-default .act-buttons{
background-color: black!important;
color: white!important;
height: 28px;
width: 28px;
}
HTML:
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" id="submit" value="Save" class="btn btn-default act-buttons" />
</div>
</div>

Answer 1

Given your most recent html...
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" id="submit" value="Save" class="btn btn-default act-buttons" />
</div>
</div>
Try this css (note the lack of a space in .btn-default.act-buttons):
.btn-default.act-buttons{
background-color: black!important;
color: white!important;
height: 28px;
width: 28px;
}
This will target any element with both classes btn-default and act-buttons
.btn-default .act-buttons would target a parent element with the class btn-default which contains a child element with the class act-buttons
.btn-default,.act-buttons would target any element with either of the classes btn-default or act-buttons

Answer 2

your css is targeting any class named act-buttons which is inside an element which has a class btn-default
you could change it to
.btn-default, .act-buttons{...}
or
.btn-default.act-buttons{...} // no space between classes

Answer 3

#KyleMit's is the answer you'll learn the most from, and specifically, you want to pay attention to his note on the And Selector:"btn-default.act-buttons will find any elements that match both class selectors, meaning any element that has class="btn-default act-buttons"
So, using the And Selector, you should use
.btn-default.act-buttons{
background-color: black;
color: white;
like here: http://www.bootply.com/bFjCr8eQlY
ps - your height and width will need it's own fixing unless what you put in the button is exactly the right size, but that's another issue.

Answer 4

Overview of CSS Selectors:
First things first, make sure you're using the right selector:
Descendant selector: .btn-default .act-buttons
Will find any elements with the class act-buttons that are descendants of an element with the class btn-default
And Selector: .btn-default.act-buttons
Will find any elements that match both class selectors, meaning any element that has class="btn-default act-buttons"
Or Selector: .btn-default, act-buttons
Will find any elements that either have a class of btn-default or a class of act-buttons
Also, check that...
The html element has access to the selector
You've applied your custom styles after the bootstrap style sheet
You should always try to override standard styles with your own
then you don't need !important
Finally, make sure you're using act-buttons or action-buttons consistently
Here's a working demo in Fiddle
.btn.act-buttons{
background-color: rgb(0,0,0);
color: white;
width: 100px;
}
Screenshot:

Answer 5

well try this
<div class="form">
<input class="field button2" id="submit" type="button" value="Save"/>
</div>
and in your css
.button {
background-color: #FFFFFF;
padding: 2px 4px;
font: 13px sans-serif;
text-decoration: none;
border: 1px solid #000;
color: #000
}
.button:hover { background-color: #46000D; }
input.button2 {
background-color: #000000;
color: #ffffff
}
input.button2:hover { background-color: #ffffff; color: #000000; }
it will look better, i hope i helped you :-D