KOAN 0 Postado 27 de Novembro 2013 Compartilhar Postado 27 de Novembro 2013 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 ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
Souren 0 Postado 3 de Dezembro 2013 Compartilhar Postado 3 de Dezembro 2013 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 :) Trófeu (s) http://i.imgur.com/DwHM1cr.jpg - CA ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
Posts Recomendados