Menu em jsf

Front-end
#1

olá,
estou tentando montar um menu em jsf, onde todos os botoes tem o mesmo tamanho, ao passar o mouse troca de cor. Tentei o seguinte:

<h:commandButton id="home" value="home" action="#{acao.link}" image="src/fundo.png" ... />

não funcionou, tentei com css e o maximo que consegui foi usar o “padding” e ai aumentou mas no caso de ser uma palavra de cada tamanho, o botão tambem seria um de cada tamanho.
Algume teria alguma ideia para me dar de como fazer um menu usando css?
Obrigado!!!

#2

Aew…
então , você pode criar uma classe em css e aplicar a todos os botoes…

#3

certo, mas quando vamos criar um menu em html e css, fazemos da seguinte forma:
-Css-
ul.menu li a{}

-html-

como vou formatar a tag h:commandlink?

#4

Amigo…
todos os componentes jsf se tranformam em html no caso do command link é um span…
sendo um codigo html voce pode associar o mesmo a uma classe css…
não sei se é a melhor maneira de fazer isso mais:

<f:view> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <style type="text/css"> .botao { color:#999; } </style> </head> <body> <h:commandLink value="adsf" id="dkfjkasdj" styleClass="botao"/> </body> </html> </f:view>

#5

entendi,
até ai tudo bem, mas se eu quisesse colocar uma imagem de fundo e ao passar o mouse essa imagem troca?
tentei de diversas formas e não deu certo. Por exemplo colocando o :hover, e para estipular um tamanho para este link?

#6

Hum… como eu não conheço muito css…
sempre que tenho que fazer algo do tipo faço com js…

#7