Criando suas próprias classes CSS de botões

criando-propria-classe-botoes-css-topo

Se você é ligado em desenvolvimento Web, muito provavelmente já esbarrou com algum framework CSS. Blueprint, Bootstrap, Green e Pure são alguns exemplos. Todos eles possuem suas particularidades e oferecem ótimas classes para a criação de sites responsivos e implementação de elementos de UI, incluindo botões (que é o foco deste post). Mas que tal aprender a criar o seu próprio conjunto de classes de botões?

Sem muitas firulas, vamos ver abaixo como criar classes simples e interessantes para botões. A primeira coisa a se fazer, é criar uma classe para um, digamos, botão base. Essa classe vai conter toda a aparência básica dos botões, incluindo suas dimensões e o tamanho da fonte. Vamos chamá-la de .but (button).

/* BOTÃO BÁSICO */

.but {
display: inline-block;
background-color: #ccc;
color: #444;
padding: 10px 20px;
text-decoration: none;
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
border: 0px;
}

Feito isso, a classe já pode ser aplicada a um elemento <a> ou <button>, dessa forma:

<a class="but">Normal Button</a>
<button class="but">Normal Button</button>

button_default

Você pode também incluir um link para abrir uma página em uma nova janela:

<a class="but" href="http://www.mainframe.blog.br" target="_blank">Normal Button</a>
<button type="button" onclick="window.open('http://www.mainframe.blog.br');">Normal Button</button>

Para o botão ficar mais estiloso e intuitivo, vamos escurecê-lo um pouco quando o usuário passar o mouse em cima (utilizando a pseudo-classe :hover). O cusor também mudará para a clássica mãozinha quando passado por cima do botão.

.but:hover {
background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));
cursor: pointer;
}

button_default_hover

Viu o efeito? Na verdade, não estamos escurecendo a cor do botão, mas sim adicionando a ele um gradiente que vai do transparente a um preto translúcido. Você entenderá o porquê disso mais na frente.

Agora que já temos um botão base, podemos criar classes para outros tipos botões. Abaixo, estão classes para botão primário (azul), botão de sucesso (verde), botão de erro (vermelho) e botão de aviso (amarelo/alaranjado). Na verdade, o que essas classes fazem é apenas alterar a cor de fundo e a cor da fonte.

/* CORES */

.but-primary {
color: #fff;
background-color: #0068B4;
}

.but-success {
color: #fff;
background-color: #009835;
}

.but-error {
color: #fff;
background-color: #CC0000;
}

.but-warning {
color: #fff;
background-color: #F28E00;
}

Para ver isso na prática, acrescente as linhas abaixo ao seu HTML:

<a class="but" href="http://www.mainframe.blog.br" target="_blank">Normal Button</a>
<a class="but but-primary" href="http://www.mainframe.blog.br" target="_blank">Primary Button</a>
<a class="but but-success" href="http://www.mainframe.blog.br" target="_blank">Success Button</a>
<a class="but but-error" href="http://www.mainframe.blog.br" target="_blank">Error Button</a>
<a class="but but-warning" href="http://www.mainframe.blog.br" target="_blank">Warning Button</a>

buttons

Perceba que ao passar o cursor em cima de cada um deles, o efeito de escurecer permanece. Isso porque usamos o gradiente com o preto translúcido. Ou seja, em vez de criarmos uma versão escura de cada cor, trabalhamos com um preto translúcido que funciona como um escurecedor. Sacou?

Botões criados, agora podemos partir para classes opcionais de efeitos. Essas classes servem para adicionar coisas como sombras ou cantos arredondados aos botões. A classe .but-shadow adiciona uma sombra de 1 pixel. Já a classe .but-rc (rounded corners), adiciona cantos arredondados.

/* EFEITOS */

.but-shadow {
box-shadow: 1px 1px 1px #999;
}

.but-rc {
border-radius: 4px;
}

Temos agora o seguinte trecho de HTML:

<a class="but but-shadow but-rc" href="http://www.mainframe.blog.br" target="_blank">Normal Button</a>
<a class="but but-primary but-shadow but-rc" href="http://www.mainframe.blog.br" target="_blank">Primary Button</a>
<a class="but but-success but-shadow but-rc" href="http://www.mainframe.blog.br" target="_blank">Success Button</a>
<a class="but but-error but-shadow but-rc" href="http://www.mainframe.blog.br" target="_blank">Error Button</a>
<a class="but but-warning but-shadow but-rc" href="http://www.mainframe.blog.br" target="_blank">Warning Button</a>

buttons_effects

Por fim, que tal ciar botões de diferentes tamanhos? Com as classes abaixo podemos criar botões pequenos, médios e grandes. Basicamente, elas alteram o tamanho da fonte para 60% (pequeno), 100% (normal) ou 140% (grande). Mas essa porcentagem seria em relação a que? Ora, em relação ao tamanho da fonte do <body>. Para que isso funcione bem, é preciso, então, definir um tamanho de fonte para o <body>. Geralmente, o tamanho padrão nos browsers é 16px.

body {
font-size: 14px;
}

/* TAMANHOS */

.but-small {
font-size: 60%;
}

.but-regular {
font-size: 100%;
}

.but-large {
font-size: 140%;
}

buttons_sizes

Curtiu? Seguindo esse raciocínio, você pode criar novas classes ou atualizar as já existentes. Por exemplo, se desejar que os textos dos botões sempre apareçam em caixa alta, você pode adicionar a propriedade text-transform à classe .but:

text-transform: uppercase;

Ou, caso não queira aplicar a propriedade a todos os botões, pode criar um classe e adicioná-la apenas aos botões em que desejar que o texto apareça em caixa alta. Vamos batizar essa classe de .but-uppercase e colocá-la perto das outras classes de efeitos. Teremos agora o seguinte:

/* EFEITOS */

.but-shadow {
box-shadow: 1px 1px 1px #999;
}

.but-rc {
border-radius: 4px;
}

.but-uppercase {
text-transform: uppercase;
}

Fonte: Tableless

Postagens Relacionadas