Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

Button personalizado.

+3
iLucas
ϟFisher
Je4n
7 participantes

Je4n Je4n  • 14.10.13 22:50

Button personalizado. Empty 14.10.13 22:50

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: [Você precisa estar registrado e conectado para ver este link.]

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

Demonstração: [Você precisa estar registrado e conectado para ver 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 [Você precisa estar registrado e conectado para ver este link.]


Créditos:
Je4n
Loko-Poko


Última edição por Je4n em 14.10.13 22:56, editado 3 vez(es)

ϟFisher ϟFisher  • 14.10.13 22:52

Button personalizado. Empty 14.10.13 22:52

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

iLucas iLucas  • 14.10.13 22:57

Button personalizado. Empty 14.10.13 22:57

Ótimo Je4n :curinga: , irei utilizar em algumas próximas index's que irei fazer,
obrigado por compartilhar !

Criatividade Criatividade  • 14.10.13 23:02

Button personalizado. Empty 14.10.13 23:02

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

Junior Junior  • 14.10.13 23:04

DesenvolvedorTechnician member

Button personalizado. Empty 14.10.13 23:04

Ficou  foda e.e concerteza vou utiliza-lo

M0nster M0nster  • 15.10.13 0:43

Button personalizado. Empty 15.10.13 0:43

Ótimo Button Je4n Gostei Muito Irei Utilizar em minha Index Parabéns  uahe

Cascavel Cascavel  • 15.10.13 0:45

Button personalizado. Empty 15.10.13 0:45

Muito Legal O Button [Você precisa estar registrado e conectado para ver esta imagem.]

Je4n Je4n  • 15.10.13 2:34

Button personalizado. Empty 15.10.13 2:34

Mais tarde posto mais alguns diferentes. :D
Permissão neste fórum:
Você não pode responder aos tópicos

BH Servers

Recomendamos a BH Servers com proteção DDOS gratuita em Cloud Server de alta performance. Entrega imediata. Saiba mais aqui.