Botões CSS3

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!