Estilizando botões (first-child, last-child, hover)

[KOAN 0]

Estive olhando este tópico e me interessei por compartilhar o que sei sobre estilização de botões com CSS. No tópico em questão não são botões, são divs, isto é, se você clicar nada acontecerá. Aqui, vamos trabalhar com botões mesmo.

 

HTML

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Nada de mais até o momento, criamos dois botões com as configurações default. Certo, temos a estrutura da nossa página, agora vamos ao que interessa:

 

CSS

Antes de mudar as propriedades dos botões, vamos deixar a section que ele se encontra mais "bonitinha". Crie um novo arquivo de Folhas de estilo em cascata (CSS) e dê o nome que quiser. Não esqueça de incluí-lo ao head do nosso HTML, exemplo:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Você pode abrir uma tag <style></style> dentro do head e inserir o código CSS ali mesmo. Eu tenho preferência por "separar as coisas" e colocar "cada um no seu quadrado", portanto vou fazer a estilização em um documento à parte. O código:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Até o momento, temos o seguinte:

 

 

Vamos ajustar o tamanho dos botões, sua posição em relação à caixa e outras duas definições:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Legal, agora vamos deixar cada botão com uma cor especifica, para isto vamos trabalhar com algumas manhas do CSS: first-child e last-child, relaxe que é tranquilo 'brincar' com isto. FIRST, primeiro! LAST, ultimo! CHILD, criança (no css, considere como "filho"). Sendo assim, veja o exemplo a seguir:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Vamos aplicar isto aos nossos botões, como temos somente dois um será o "first" e o outro o "last" (Você pode colocar somente o first e deixar o outro com cor padrão).

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Resultado:

 

Legal? Calma, vamos brincar um pouco mais com CSS. E se colocarmos o mouse sobre o botão, o que acontece? Nada? Vamos modificar isto e fazer uma gracinha.

 

HOVER

Quando o mouse estiver o sobre o botão, o que deve acontecer? Vamos espeficar isto! Que tal: sombra no texto e botão na cor azul. É uma boa?

Vamos por isto então no nosso CSS:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Resultado:

 

ÓTIMO, tudo funcionando! Mas vamos deixar essas sombras aparecem de uma forma mais "suave"? Dando aquele efeito de transparência, fazendo com que o azul vá surgindo aos poucos até chegar a cor que determinamos no "button : hover".

 

Volte ao seletor "button" e na última linha adicione "transition: all .6s;". Ficará assim:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Recarregue a página e veja o resultado. Bem melhor hein?! Quanto maior o valor atribuído à propriedade transition, mais suave será o efeito de transição.

 

 

Dúvidas sobre "linear-gradient" ou "transition" basta postar nos comentários! Até breve.

 

Código completo:

 

 

CSS:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

HTML:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

 

[Souren 0]

Ai que saudade da epoca que eu olhava essa área e tinha um tópico rs.

Desculpa pela demora para responder, eu conhecia a técnica ( claro ) , mas eu curti teu botão ( sem o efeito da borda ).

Parabenz :)