CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

Cascading Style Sheets (CSS) - Botões personalizados

Por Benedito Silva Júnior - publicado em 11/07/2016


Com o CSS podemos personalizar os botões gerados pelo HTML e deixar nossos formulários mais apresentáveis.

Para criar esses botões e disponibilizá-los em seus formulários, siga os procedimentos abaixo:

1. Crie o arquivo .css com as seguintes linhas:

.btn { font-family: arial; font-size:10px; text-transform: uppercase; font-weight:500; border:none; padding:5px; cursor: pointer; display:inline-block; text-decoration: none; } .btn-blue /* botão azul */ { background:#069; color:#fff; box-shadow:0 5px 0 #CCCCCC; }

2. No arquivo .html, onde estão os códigos do formulário, chame o arquivo .css e informe o "class" do objeto SUBMIT como "btn btn-blue". Veja:

<link rel="stylesheet" type = "text/css" href="arquivo.css" > ... <INPUT type="SUBMIT" class="btn btn-blue" value="Responder enquete">

Imagem do botão:

Botão personalizado em CSS

Os códigos .css acima podem ser alterados de acordo com as preferências e necessidades de seu projeto.

Existe um site no qual é possível gerar botões personalizados e seus respectivos códigos-fonte. O site em questão é http://css-button-generator.com/ 

 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo