CSS3 - Botões

Link , basicamente...

Código:

<a class="button" href="”#”">BUY NOW</a>

Agora a estilização basica...

Código:

.button {
text-decoration: none;
color: white;
font-size: 18px;
font-family: arial, sans serif;
}

Dando A Estrutura Botão
Em seguida vamos fazer o olhar como um botão de forma sólida. Nós vamos fazer isso, dando-lhe uma cor de fundo, uma fronteira e alguns estofamento.

Código:


padding: 11px 35px 11px 35px;
border: 1px solid rgb(120,120,120);
background: rgb(82,178,214);

Você pode jogar um shadow...

Código:


text-shadow: 0px 1px 0px rgb(67,137,167);

Algumas versõesde browser's não lê CSS3 .. exemplo:

Código:

Border-radius: 3px;

Comando simples..

Código:

-moz-border-radius: 3px;

Comando para mozilla

Código:


-webkit-border-radius: 3px;

Chrome , Safari..etc!


Pra fazer um gradiente..

Código:


background: rgb(82,178,214);

Código:


-webkit-gradient(linear, left top, left bottom, from(#72C0DE), to(#42ABD2));

Chrome...

Código:


background: -moz-linear-gradient(top, #72C0DE, #42ABD2);

Mozilla





Efeito Hover...

Código:


.button:hover {
 
border: 1px solid rgb(130,130,130);
 
/*Para browers that don't support gradients*/
background: rgb(105,188,220);
 
/*Para Google Chrome and Safari*/
background: -webkit-gradient(linear, left top, left bottom, from(#82C7E1), to(#5AB6D8));
 
/*Para Firefox*/
background: -moz-linear-gradient(top, #82C7E1, #5AB6D8);
}
 
.button:active {
background: rgb(54,165,207);
 
/*Para Google Chrome and Safari*/
background: -webkit-gradient(linear, left top, left bottom, from(#5AB6D8), to(#82C7E1));
 
/* Para Firefox*/
background: -moz-linear-gradient(top, #5AB6D8, #82C7E1);
}

É isso...

(=