Btn are not getting the color

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:

<!-- language: lang-css --> 
.btn-default .act-buttons{
    background-color: black!important;
    color: white!important;
    height: 28px;
    width: 28px;
}

HTML:

<!-- language: lang-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>

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

<!-- language: lang-css --> 
.btn.act-buttons{
    background-color: rgb(0,0,0);
    color: white;
    width: 100px;
}

Screenshot:

screenshot