Nestes pequenos passos vou exemplificar como inserir cantos arredondados num botão do seu website.

Este tutorial aplica-se apenas ao browser Mozilla Firefox, o Internet Explorer não irá aplicar os cantos arredondados deixando-os por defeito (quadrados).
Apliquei este tutorial no website: www.maisevents.com especificamente nesta página, também na aplicação do anterior tutorial: Criar um botão retroceder.

Dantes os cantos do botão “Retroceder” estavam quadrados agora com este pequeno código abaixo descrito poderão obter esse mesmo botão com cantos arredondados.

1º Passo

Terão de adicionar no ficheiro style.css (geralmente presente na pasta do tema do vosso website) as seguintes linhas de código (pode adicionar as linhas no fim do ficheiro):

.cantoarredondados {-moz-border-radius:5px;
-webkit-border-radius:5px;}

O texto: cantoarredondados é o nome do estilo que estamos a criar, que pudemos denominar de outra maneira por ex: “botoesrecondos” no meu caso escolhi “cantosarredondados” para a sua simples aplicação no website.

Após editado o ficheiro poderão guardar e reenvia-lo novamente via ftp para o servidor.

2º Passo

Em seguida é pegar-mos então então n anterior tutorial que referi acima da criação do botão retroceder.

O código fornecido era:

<input onclick=”history.back(-1)” type=”button” value=”Retroceder!” />

Agora teremos de aplicar o nossa classe que criamos.

<input class=”cantosarredondados” onclick=”history.back(-1)” type=”button” value=”Retroceder!” />

Agora pudemos inserir o código final com a class aplicada na página onde pretendemos que apareça o resultado.

Espero que este nova dica lhe seja útil,
Bons cliques.

4 Respostas para “Aplicar cantos arredondados num botão no seu site”

Deixe uma Resposta