Criar botão em CSS – Tutorial

Por | Atualizado em 2015-11-01

Neste artigo, iremos explicar como criar botões em CSS gratuitamente. Para isso, iremos utilizar o serviço online Button Maker.

Os botões em CSS dispensam a utilização de imagens, melhorando o tempo de carregamento das suas páginas.

Criar botão em CSS

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 *