Button personalizado.

Olá, hoje vim trazer um Button (botão) codificado para ser utilizado em trabalhos de Sites, layout, etc. Me inspirei nos botões que o Loko-Poko fez que eram só imagens então trouxe codificado. Para quem quiser ver o tópico dele: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Vamos lá, se você não tem noção de css,  não posso fazer nada.

Demonstração: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Codificação CSS:

Código:


.button {
   height:64px;
   line-height:64px;
   text-align:center;
   float:right;
   outline:0;
   padding: 0 45px;
        padding-top: 0px;
        padding-right: 20px;
        padding-bottom: 0px;
        padding-left: 20px;
   font-weight:bold;
   font-size:22px;
   background:url(./imagens/bg-titulo.png) repeat;
   background-color:#4ba3d6;
   background-position:center right;
   border-radius: 3px;
   border: 1px solid rgba(0,0,0,.4);
   border-bottom: 3px solid rgba(0,0,0,.4);
   border-bottom: 2px solid rgba(0,0,0,.4);
        box-shadow: inset 0 1px 0 0px rgba(255,255,255,.25);
   text-shadow: 1px 1px 0 rgba(0,0,0,.3);
   color: #fff;
   cursor: pointer;
   cursor: hand;
   font-weight:bold;
   -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
       user-select: none;
   }
   
.button:hover{
   background-color:#55b5ed;
   }


Para que o Botão fique com Efeito de Transição, adicione isso em seu CSS:

Código:


* {
   margin:0;
   padding:0;   
    transition: background .5s ease-in-out;
   -moz-transition: background .5s ease-in-out;
   -webkit-transition: background .5s ease-in-out;   
}


Você também pode montar esse efeito de transição só na CSS do botão para que não fique todo o seu Layout com transição nos botões.

*Por fim, salve essa imagem que é o background do botão [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]


Créditos:
Je4n
Loko-Poko

Ótimo botão, principalmente porque não utiliza nenhuma imagem, deixando mais leve :)
Obrigado por ter feito e compartilhado conosco :)

Parabéns Je4n.
Queria fazer esses buttons também :OKAY:

Ficou  foda e.e concerteza vou utiliza-lo

Muito Legal O Button [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Mais tarde posto mais alguns diferentes. :D