Regras para estado de botão

É muito comum ver pela internet diversos sites que aplicam as mais diversas mudanças em estilos para :hover e :active, e nem sempre o resultado é agradável. Tyler Galpin, um designer canadense, sugere no seu blog três regras básicas para esses casos, cabendo a cada um escolher qual das três seguir.

Para o caso de :hover:

1) O botão deve ficar mais claro;

2) O botão deve car mais escuro;

3) O botão deve mudar de cor.

E o estado de :active:

1) O botão deve se mover 1 ou 2 pixels para baixo;

2) O botão deve ter o seu gradiente (caso presente) invertido;

3) O botão deve ficar ainda mais escuro.

Em seu blog, Tyler também comenta sobre o que se deve evitar nestes casos e outras dicas importantes sobre botões – http://galp.in/blog/2011/08/02/the-ui-guide-part-1-buttons/.

Utilizando as regras indicadas, vamos criar um botão verde com cantos arredondados.

button {

background-color: #6DA033;

border: 1px solid #588129;

color: white;

font-size: 0.8em;

font-weight: bold;

padding: 5px 10px;

}

Agora, deixamos o botão um pouco mais interessante com border-radius, text-shadow e box-shadow.

button {

background-color: #6DA033;

border-radius: 13px;

border: 1px solid #588129;

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);

color: white;

font-size: 0.8em;

font-weight: bold;

padding: 5px 10px;

text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.6);

}

O valor de 13px para o border-radius é por que o botão tem 27px de altura – então usamos aproximadamente metade desse valor. Não podemos utilizar 50% por que esse valor iria levar em consideração a largura do elemento, fazendo que ele tomasse a forma de uma elipse. As sombras são para realçar o texto (com o text-shadow preto acima do texto branco) e a borda superior. Agora, é a vez do gradiente.

button {

background-color: #6DA033;

background-image: linear-gradient(bottom, #6DA033 47%, #87C442 55%);

border-radius: 13px;

border: 1px solid #588129;

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);

color: white;

font-size: 0.8em;

font-weight: bold;

padding: 5px 10px;

text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.6);

}

Diferente do gradiente anterior, agora vamos informar as posições das cores – 47% e 55% . O primeiro tom de verde se mantém até 47% da altura do gradiente, e o segundo tom começa a partir dos 55%. O espaço entre eles – os 8% restantes – são preenchidos com a transição de uma cor para outra. Para a versão de :hover do botão, seguindo as indicações comentadas anteriormente, vamos escurecer 10% das cores do gradiente e das bordas do botão.

button:hover {

background-color: #618F2D;

background-image: linear-gradient(bottom, #618F2D 47%, #79B238 55%);

border-color: #4E7324;

}

Para o :active reutilizamos a técnica para escurecer bastante o botão que usamos anteriormente, apenas ajustando as cores para o verde que está sendo aplicado agora.

button:active {

background-color: #618F2D;

background-image: none;

border-color: #405E1E;

box-shadow: inset 0 2px 1px rgba(0,0,0, 0.15);

}

Os mesmos padrões, mas aplicados com cores diferentes e leves mudanças de estilo, levam a elementos agradáveis e funcionais. Apesar de usarmos bastante CSS 3 aqui, os botões degradam muito bem em navegadores que possam não ter suporte a sombras ou gradientes. Isso se deve principalmente à presença do background-color e do padding usado para manter o tamanho dos botões.

4

Source: scriptcase / Regras para estado de botão

Comments

comments

Greg

Old school developer with a passion for food, bikes and a whole lot of weird things.

Leave a Reply

Your email address will not be published.