7.9. Aplicando CSS3 em botões
Casa do Código
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); }
Figura 7.21: Nosso botão verde com um gradiente.
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; }
Figura 7.22: O estado de ’hover’ para o botão verde.
E o :active? Podemos reutilizar 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;
146