How to give background color to button in lightning components

Question

I am not able to give background color to buttons below.please help

Answer 1

You haven't closed the quotes in the ui:inputText field. Also, there's spelling mistake in the ui:inputText

Component:

<ui:inputText label="enter name"/> 
<div>  
    <ui:button label="PROGRAMS" class="customButton" /> 
    <ui:button label="Learning" class="customButton" /> 
    <ui:button label="Training" class="customButton" /> 
    <ui:button label="Contacts" class="customButton" /> 
    <ui:button label="SUPPORT" class="customButton" /> 
</div>

Style:

.THIS .customButton{
   background-color: #2574a9;
   color: #fff; 
}

Result:

You may modify the styling as per your requirement.

Answer 2

In Your case:

a) If ui:button contains NO class

.THIS .uiButton{ background-color:blue; }

b) If ui:button contains class

.THIS .uiButton.classname{ background-color:blue; }

Answer 3

<ui:button label="PROGRAMS" class="customButton" /> 

.THIS .customButton{ background-color: #2574a9 !important; color: #fff; }