Botões CSS Simples e Identificativos

Por Bruno Carlos

Março 9, 2008

Uma boa prática quando introduzimos botões num site passa por procurar que o utilizador consiga identificar as acções aos quais estes estão associados.

Neste exemplo vou utilizar 3 acções bastante comuns: O Guardar, Mudar Password e Cancelar. Seleccionei estas três acções pois irão permitir definir igualmente associar cores a cada acção. Facilmente atribuimos o verde à acção de Guardar, enquanto atribuimos o vermelho à acção de Cancelar, no entanto não conseguimos definir uma cor standard para acção Mudar Password, portanto neste caso vou optar pelo amarelo, mas também poderia optar pela cor azul que também não me parecia descabido. Uma forma complementar de atribuir mais significado aos botões é através de imagens, aqui vou utilizar icons a partir da galeria do FAMFAMFAM, de preferência uma verde, amarela e vermelha.
Ou seja procuro algo semelhante a estes botões.

O HTML

<div class="buttons">
    <button type="submit" class="guardar">
        <img src="apply.png" alt=""/>
        Guardar
   </button>

  <a href="#">
        <img src="edit.png" alt=""/>
        Alterar Password
    </a>

    <a href="#" class="cancelar">
        <img src="cancel.png" alt=""/>
        Cancelar
    </a>
</div>

O objectivo é criar botões agradáveis a nível visual, evitando deste modo que se recorra abusivamente a imagens criadas no Photoshop. Quando olhamos para o código html apresentado reparamos que dois dos botões na verdade são links, isto é útil porque permite manter uma consistência nas acções disponíveis ao utilizador, sejam estas construídas através de botões ou de simples links.

O CSS deste exemplo não é complexo, mas para funcionar correctamente em determinados browsers foi necessário ajustar o atributo padding.

O CSS

.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;

font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#B5AD64;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}

button:hover, .buttons a:hover{
background-color:#F5EDA4;
border:1px solid #D5CD84;
}
.buttons a:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}

/* Guardar */

button.guardar, .buttons a.guardar{
color:#529214;
}
.buttons a.guardar:hover, button.guardar:hover{
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
.buttons a.guardar:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}

/* Cancelar */

.buttons a.cancelar, button.cancelar{
color:#d12f19;
}
.buttons a.cancelar:hover, button.cancelar:hover{
background:#fbe3e4;
border:1px solid #fbc2c4;
color:#d12f19;
}
.buttons a.cancelar:active{
background-color:#d12f19;
border:1px solid #d12f19;
color:#fff;
}

No final ficamos com três acções bastante identificativas daquilo que é suposto as mesmas despoletarem.

Resultado Final do Exemplo Apresentado.

Fonte: Rediscovering the Button Element

Partilhar esta Entrada