title: How to override PrimeFaces CSS to customize my button?
body: <p>I'm trying to simply customise a commandButton with PrimeFace but I cannot manage to do it...</p>
  
  <p>I have read many answer over the net and I have put this in the body (to make it load AFTER primeFace's css)</p>
  
  <pre><code>&lt;h:outputStylesheet name="css/layout2.css" /&gt;
  </code></pre>
  
  <p>When I check with chrome dev tool I can see that the button has this style:</p>
  
  <pre><code>.ui-button .ui-widget .ui-state-default .ui-corner-all .ui-button-text-icon-left 
  </code></pre>
  
  <p>so in my css file I have added this</p>
  
  <pre><code>.ui-button .ui-widget .ui-state-default .ui-corner-all .ui-button-text-icon-left .mygreen {..}
  </code></pre>
  
  <p>and this my xhtml:</p>
  
  <pre><code>&lt;ui:define name="content"&gt;
          &lt;h:form id="formTable"&gt;
              &lt;p:dataTable&gt;
                  ...
                  ...
                  ...
                 &lt;p:column styleClass="buttonColumn"&gt;
                      &lt;p:commandButton icon="ui-icon-check" styleClass="mygreen" value="test2" id="mybuttontest" value="blabla"/&gt;
  
  
       &lt;/p:dataTable&gt;
       &lt;/h:form&gt;
  &lt;/ui:define&gt;
  </code></pre>
  
  <p>But it still doesnt override the background color!</p>
  
  <p>What am I doing wrong?</p>