Grid layout para formulários com botões arredondados

Por RamonPage

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.

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…

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

… Depois

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

E no estilo…

.lblbutton {
  margin: 0;
  padding: 0 0 0 8px;
  background: #fff url(bg-button.gif) no-repeat 0 0;
}

.lblbutton .button {
  border: 0;
  padding: 0 8px 0 0;
  background: #fff url(bg-button.gif) no-repeat top right;
  height: 24px;
}

Então, é isso! Enjoy! :)

Baixe os arquivos.

Marcado em: ,

Os comentários estão desabilitados para este artigo.
Deixe-me saber sua opinião via Twitter

* * *