Ei pessoal! Enquanto trabalhava em um design para meu amigo @ Zackify . Este design usará uma tonelada de entradas de formulário, então pensei por que não começar a experimentar alguns botões. Minha principal inspiração foi o botão Tweet do Twitter. Eu queria botões com um efeito semelhante, mas não exatamente o mesmo. Aqui está o resultado final.
Para ser honesto, estou muito orgulhoso disso. É a primeira vez que faço botões que realmente gosto. É limpo e simples. Também é fácil de personalizar. Se você deseja alterar as cores ou a maneira como usei as sombras. É por isso que adoro CSS, torna tudo mais fácil.
Agora, vamos prosseguir para o código. Para fins de demonstração, usarei o elemento de botão, mas isso pode ser aplicado a elementos de entrada ou href. Esta é a aparência do HTML do botão.
<button class="button">Click Me!</button>
Agora, para o CSS, fica um pouco complicado. Envolve o uso de gradientes, transições e sombras de caixa, algo a que nem todos estão acostumados. É muito fácil entender a essência da sintaxe e não se preocupe, não usarei uma sintaxe maluca. O botão tem três estados: normal, flutuante e ativo. Para o primeiro estado, aplicamos todo o estilo básico que queremos para o botão, todos os outros estados herdarão o estilo que usamos, a menos que o alteremos. Chega de conversa, mais código!
.button {
background-color: #eeeeee;
background-image: -webkit-linear-gradient(top, #eeeeee, #d1d1d1);
background-image: -moz-linear-gradient(top, #eeeeee, #d1d1d1);
background-image: -o-linear-gradient(top, #eeeeee, #d1d1d1);
background-image: -ms-linear-gradient(top, #eeeeee, #d1d1d1);
background-image: linear-gradient(top, #eeeeee, #d1d1d1);
border: 1px solid #cccccc;
border-radius: 0.125em;
box-shadow: 0 0 0.125em #cccccc;
color: #444444;
font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-serif;
font-size: 1em;
text-shadow: 1px 1px 0 #eeeeee;
cursor: pointer;
padding: 0.25em 0.5em;
margin: 0.25em 0;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
-ms-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}
Só para vocês saberem, eu divido meu código assim para organizá-lo ainda mais e torná-lo mais limpo. Depende de você se deseja ou não usar o mesmo estilo de código que eu. Tudo bem! Portanto, temos o estilo básico, mas o que significa tudo isso? Como você pode ver, aplicamos o gradiente e uma cor de fallback. Não vou explicar muito os diferentes prefixos do vendedor, pois este é um tutorial sobre como fazer botões, mas precisamos usá-los para navegadores que ainda não suportam gradiente linear . Desta forma, estamos fazendo com que nossos sites tenham uma aparência incrível em navegadores do passado, do presente e do futuro.
Você também notará como eu uso a medição em, mas também a medição px. Eu os uso para tornar o site mais fluido, mas também uso px se estou definindo 1px, apenas mais fácil para mim e não sacrifica muito. Além disso, aplico algum estilo à fonte do botão. Mais notavelmente, uso a propriedade text-shadow . Eu uso isso para fazer com que o texto tenha uma aparência inserida. Também defino o cursor para se parecer com um ponteiro, que é a aparência do cursor quando você passa o mouse sobre um link, então dou ao botão algum espaço para respirar com margens e preenchimento.
Agora vamos trabalhar nos outros estados do botão. Para o hover, tudo o que fazemos é mudar as cores. Se você entender o código acima, será um pouco mais fácil.
.button:hover {
background-color: #eaeaea;
background-image: -webkit-linear-gradient(top, #eaeaea, #c9c9c9);
background-image: -moz-linear-gradient(top, #eaeaea, #c9c9c9);
background-image: -o-linear-gradient(top, #eaeaea, #c9c9c9);
background-image: -ms-linear-gradient(top, #eaeaea, #c9c9c9);
background-image: linear-gradient(top, #eaeaea, #c9c9c9);
border-color: #bbbbbb;
box-shadow: 0 0 0.125em #bbbbbb;
}
Pronto, é isso. Nós mudamos as cores basicamente. Eu realmente não preciso explicar muito sobre isso, lol. Em seguida, temos o estado ativo do botão. Isso é mais fácil, pois usamos apenas uma propriedade. Sendo essa a propriedade da sombra da caixa . Nós o tornamos inserido para dar o efeito de ser empurrado para dentro.
.button:active {
box-shadow: inset 0 0 0.5em #c9c9c9;
}
Espero que tenham gostado deste tutorial e aprendido algo novo com ele. Espero escrever mais tutoriais sobre HTML, CSS, JS e PHP aqui. Deixe-me saber o que vocês querem fazer e eu verei o que posso fazer!