Algum tempo atrás, estava querendo criar botões que fossem mais customizáveis no qual não fossem imagens e não utilizassem nenhum framework ou js para isto.
Após algum pequeno trabalho consegui gerar alguns botões que são simples, mas podem ser facilmente customizáveis a partir de seus css.
Veja alguns modelos:
Vamos ver como iremos fazê-los :
Inicialmente vamos criar uma classe que será geral para todos os botões:
.button{
padding:5px 15px 5px 15px;
text-decoration: none;
display: inline-block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25);
outline:none;
position:relative;
margin:10px;
padding:20px 28px;
background:transparent url(buttonover.png) repeat-x top left;
white-space:nowrap;
border-radius:16px;
font-size:0px;
}
.button:hover{
background-color: #777;
}
.button:active{
top: 1px;
left:1px;
}
Repare que nesta classe existe um background, mas ele servirá apenas para dar um efeito quando utilizarmos as ações de hover do usuário.
Agora podemos gerar 20 tipos de botões de forma bastante variada utilizando css3 e cores aleatórias:
.shadow{
background-color: #a3a3a3;
border: 2px solid #777;
color: #FFF;
text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}
.engraved{
background: #666;
border: 2px solid #777;
color: #000;
text-shadow: 0px 1px 1px #fff;
}
.glow{
color: #fff;
background: #888;
border: 2px solid #777;
text-shadow: 1px 1px 6px #fff;
}
.white{
color: #fff;
background: #fff;
text-shadow: 1px 1px 4px #000;
border: 2px solid #f0f0f0;
}
.white:hover{
background-color:#f1f1f1;
}
.red{
background-color: #B00000;
border: 1px solid #7F0000;
color: #FFF;
text-shadow: 1px 1px 4px #000;
}
.red:hover{
background-color:#800000;
}
.lightblue{
background-color: #7FB0F0;
color: #FFF;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.lightblue:hover{
background-color:#7FA0C0;
}
.olive{
background-color: #B0E000;
border: 1px outset #D0E000;
color: #FFF;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}
.olive:hover{
background-color: #90A000;
}
.orange{
background-color: #FFCC00;
border: 1px outset #F2FF00;
color: #FFF;
}
.orange:hover{
background-color: #FF8000;
}
.pink{
background-color: #C0107F;
border: 1px outset #70107F;
color: #FFF;
}
.pink:hover{
background-color: #F0107F;
}
.pink:active{
border: 1px inset #70107F;
}
.sea{
background-color: #20807F;
color: #FFF;
}
.sea:hover{
background-color: #60807F;
}
.rose{
background-color: #F07FD0;
color: #FFF;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
}
.rose:hover{
background-color: #B07FA0;
}
.black{
background-color: #000;
background-image:url(buttonover2.png);
color: #FFF;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}
.black:hover{
background-color: #777;
}
.sand{
background-color: #FFF090;
background-image:url(buttonover2.png);
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.sand:hover{
background-color: #F0C07F;
}
.violet{
background-color: #9400D3;
background-image:url(buttonover2.png);
color: #777;
text-shadow: 0px 1px 1px #fff;
}
.violet:hover{
background-color: #8A2BE2;
}
.green{
background-color: #32CD32;
background-image:url(buttonover2.png);
color: #fff;
font-family:"Century Gothic";
}
.green:hover{
background-color: #2F4F4F;
}
.darkblue{
background-color: #00008B;
background-image:url(buttonover2.png);
color: #fff;
}
.darkblue:hover{
background-color: #191970;
}
.sunset{
background-color: #FF6347;
background-image:url(buttonover2.png);
color: #777;
font-family:"Palatino Linotype";
}
.sunset:hover{
background-color: #FF7F50;
}
.choco{
background-color: #D2691E;
background-image:url(buttonover2.png);
color: #fff;
}
.choco:hover{
background-color: #D2B48C;
}
.cadet{
background-color: #5F9EA0;
background-image:url(buttonover2.png);
color: #fff;
}
.cadet:hover{
background-color: #008080;
}
.aqua{
background-color: #00FFFF;
background-image:url(buttonover2.png);
color: #fff;
}
.aqua:hover{
background-color: #00FFCC;
}
Agora basta adicionar o html para instanciar os botões :
<a href="#" class="button shadow">Cool Shadow</a>
<a href="#" class="button engraved">Dark Engraved</a>
<a href="#" class="button glow">Mystic Glow</a>
<a href="#" class="button white">Frozen White</a>
<a href="#" class="button red">Sexy Red</a>
<a href="#" class="button lightblue">Heavenly Blue</a>
<a href="#" class="button olive">Olive Outset</a>
<a href="#" class="button orange">Juicy Orange</a>
<a href="#" class="button pink">Lovely Pink</a>
<a href="#" class="button sea">Deep Sea</a>
<a href="#" class="button rose">Rose Vanity</a>
<a href="#" class="button black">Buttonize Gray</a>
<a href="#" class="button sand">Dreamy Sand</a>
<a href="#" class="button violet">Violent Violet</a>
<a href="#" class="button green">Grasshopper</a>
<a href="#" class="button darkblue">Ocean Blue</a>
<a href="#" class="button sunset">Golden Sunset</a>
<a href="#" class="button choco">Sweet Chocolate</a>
<a href="#" class="button cadet">Cadet Dreams</a>
<a href="#" class="button aqua">Aqua Love</a>
Faça o download do exemplo aqui.
Bom, espero que gostem, logo no próximo post irei mostrar como criar efeitos hover somente com Css3 em botões.
Até a próxima!
Não deixe de curtir nossa página no facebook e ficar por dentro de tudo que acontece : facebook.com/codigosimples
