Botão CSS 3 – Aprenda a fazer um

Nos tempos mais remotos da internet, em que as tecnologias como jQuery e CSS 3, ainda nem pensavam em existir, eu já me aventurava a criar alguns sites e devo falar pra você que era bem complicado. Validação de formulários com JS puro, e pra fazer um botão bonitinho como esse que vou mostrar pra vocês hoje, só com photoshop e depois carregando a imagem no HTML.

Felizmente hoje temos o CSS 3 que nos ajuda a melhorar nossos botões pelo site e não pesam tanto, quanto as imagens que utilizávamos antes, era tão grave, que as vezes precisávamos fazer duas imagens para botões que apenas mudava de SALVAR para ALTERAR. Então vamos aprender como faz.

O CSS

{code type=css}

.button {
display: inline-block;
zoom: 1;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #FADDDE;
border: solid 1px #980C10;
background: #D81B21;
background: -webkit-gradient(linear, left top, left bottom, from(#ED1C24), to(#AA1317));
background: -moz-linear-gradient(top, #ED1C24, #AA1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ed1c24′, endColorstr=’#aa1317′);
}
.button:hover {
background: #b61318;
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#c9151b’, endColorstr=’#a11115′);
}
.button:active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#aa1317′, endColorstr=’#ed1c24′);
}

{/code}

O HTML

{code type=html}

Comentar

{/code}

Para acessar a demonstração, CLIQUE AQUI

O que você achou? Já sabia fazer botões CSS3? Comente e compartilhe!

Receba as melhores dicas para criar um negócio digital lucrativo

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br