Criar botão em CSS – Tutorial

Atualmente é muito simples criar botões em CSS, dispensando o recurso a imagens que sobrecarregam as suas páginas. Ao usar a linguagem CSS, você poderá personalizar o tamanho, cor e forma do botão.

Você poderá inclusivamente usar a ferramenta “Font Awesome”, para adicionar pequenos ícones aos seus botões tornando-os mais apelativos.

Criar botão em CSS

Em primeiro lugar, comece por adicionar o código base do seu botão na secção <style> das suas páginas:

.botao {
background-color: #4CAF50; /* verde */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}

Repare que o botão é completamente personalizável. No campo “background-color”, poderá definir a cor do seu botão que deverá ser feita através do código HTML. Caso tenha dúvidas, consulte a nossa tabela de cores HTML.

No campo “color” irá definir a cor do texto, que obviamente deverá ser legível, devendo contrastar com a cor de fundo. Os atributos text-align serve para alinhar o seu texto (left, right ou center) e o text-decoration para adicionar efeitos aos texto (sublinhado, negrito, etc.).

Após declarar o estilo poderá “chamar” esse estilo na sua página usando o atributo “class”. Por exemplo:

<a href="" class="botao">Botão de exemplo</a>

Alternativa…

Em alternativa, use o serviço ButtonMaker. Para isso, comece por aceder ao “Button Maker“ e construa o seu botão CSS, utilizando o painel (da direita) de personalização.

Criar botão em CSS - Tutorial

Quando terminar, clique no botão que criou para obter o código de CSS de incorporação. Agora, aceda à sua página e cole o código dentro da Tag “<style type='text/css'>” e guarde as alterações.

Exemplo:

No Blogger, aceda ao menu “Modelo” e clique no botão “Editar HTML”, cole o código dentro da secção “<style type='text/css'>”.

No WordPress, aceda ao menu aparência – editor – selecione a secção “styleshett.css” e cole o código no final da página.

Outros sites: cole o código na secção “<style type='text/css'>”

Agora sempre que quiser inserir um botão CSS, basta adicionar o atributo class com o nome do botão, por exemplo:

<button class="botao"…>Texto</button>
<input class="botao" type="button" value="Apagar" />

Onde “botao” é o nome utilizado na declaração do CSS.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *