Estive procurando por uma solução para esilizar botões de formulário, sem comprometer a semântica destes. Na ma.gnolia eu já tinha uns 4 exemplos. São eles: 1) Scalable CSS Buttons Using PNG and Background Colors, 2) Styling the button element with sliding doors, 3) How to make sexy buttons with CSS, 4) Simple Round CSS Links ( Wii Buttons ).

Tirando algumas restrições, como o uso de javascript em alguns casos e <span> em outros, fiz uma mistura entre estas soluções e adicionei ao recurso já criado Grid layout para formulários.

Veja um exemplo.

Peneirando…

As soluções [2] e [3] foram as que mais me agradaram, porém tinham o inconveniente do uso de <span> na marcação. Para não perder a viagem, gostei muito do estilo dos WII Buttons e usei a imagem deles como exemplo para a minha solução.

Criando os botões

A solução foi simples, pois o grid layout já tinha o <label> como container dos botões de submissão. Resolvi, então, explorar este ponto para gerar os botões arredondados.

Basicamente, criei apenas uma classe adicional para os labels que possuem botões. Chamei-a de lblbutton. A criação ficou da seguinte forma:

Antes…

1. <label class="small"><input type="submit" class="button" value="Enviar" /></label>

… Depois

1. <label class="small lblbutton“><input type=”submit” class=”button” value=”Enviar” /></label>

E no estilo…

1. .lblbutton {
2. margin: 0;
3. padding: 0 0 0 8px;
4. background: #fff url(bg-button.gif) no-repeat 0 0;
5. }
6.  
7. .lblbutton .button {
8. border: 0;
9. padding: 0 8px 0 0;
10. background: #fff url(bg-button.gif) no-repeat top right;
11. height: 24px;
12. }

Então, é isso! Enjoy! :)

Baixe os arquivos via Google Code

Esta postagem foi criada em 4/05/08 às 3:28 pm e pertence à(s) seguinte(s) categoria(s): CSS, Desenvolvimento. Você pode receber os comentários para esta mensagem via RSS 2.0 feed. Você pode, também, inserir uma resposta, ou inserir um trackback em seu site.