JSF. Change buttons/commandButtons text style - html

Question

I need change the jsf(now use jsf 2.2) button text style. I didn't find any default styles in the other forums(like .ui-buttons, .ui-buttons-text-only, it doesn't work).
As example, I need a button with sizes(200, 200, blue), in the center of this rectangle new (20,20, white) and the simple text "blah". If
try
<h:button value="Logout" outcome="welcome" styleClass="button">
<h:outputLabel value="blah" styleClass="some_style">
</h:button>
result will be next -> button, after it the text 'blah', but I need text inside button.
Have anyone same problem?
I need much same butons and commandButtons. Maybe some can give advice about reasons to create own jsf element with need parameters and styles?
Thx

Answer 1

Because there is small space in comment section, I post it as answer.
For changing background, font size, style of button the following syntax and styles can be used:
html
<h:commandButton value="blah" action="welcome" styleClass="richButton" />
css
.richButton {
margin:0 5px 0 0;
padding:5px 10px 5px 10px;
height:29px;
font-size:12px;
color:#262626;
font-weight:bold;
border:1px #ccc solid;
border-radius:5px;
cursor:pointer;
font-family:Arial, Helvetica, sans-serif;
/* IE10 Consumer Preview */
background: -ms-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Mozilla Firefox */
background: -moz-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Opera */
background: -o-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Webkit (Safari/Chrome 10) */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #E3E3E3));
/* Webkit (Chrome 11+) */
background: -webkit-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* W3C Markup, IE10 Release Preview */
background: linear-gradient(to bottom, #FFFFFF 0%, #E3E3E3 100%);
}
.richButton:hover:enabled {
/* IE10 Consumer Preview */
background: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* Mozilla Firefox */
background: -moz-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* Opera */
background: -o-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* Webkit (Safari/Chrome 10) */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #CCCCCC));
/* Webkit (Chrome 11+) */
background: -webkit-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* W3C Markup, IE10 Release Preview */
background: linear-gradient(to bottom, #FFFFFF 0%, #CCCCCC 100%);
}
.richButton:active:enabled {
/* IE10 Consumer Preview */
background: -ms-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* Mozilla Firefox */
background: -moz-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* Opera */
background: -o-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* Webkit (Safari/Chrome 10) */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0F0F0), color-stop(1, #CCCCCC));
/* Webkit (Chrome 11+) */
background: -webkit-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* W3C Markup, IE10 Release Preview */
background: linear-gradient(to bottom, #F0F0F0 0%, #CCCCCC 100%);
}
.richButton:disabled {
font-weight: normal;
color: #888888;
}
You need change size, border size, border radius, background.