Início
Loja
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Demonstração: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]Css:
- Código:
.button {
height:64px;
line-height:64px;
text-align:center;
float:right;
outline:0;
padding: 0 45px;
padding-right: 20px;
padding-left: 20px;
font-weight:bold;
font-size:22px;
background: #4ba3d6 url(./imagens/bg-titulo.png) repeat;
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);
-webkit-box-shadow: inset 0 1px 0 0px rgba(255,255,255,.25);
-moz-box-shadow: inset 0 1px 0 0px rgba(255,255,255,.25);
text-shadow: 1px 1px 0 rgba(0,0,0,.3);
-moz-text-shadow: 1px 1px 0 rgba(0,0,0,.3);
color: #fff;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-webkit-transition: background .5s ease-in-out;
}
.button:hover{
background-color:#55b5ed;
transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-webkit-transition: background .5s ease-in-out;
}
Html:
- Código:
<div class="button">Texto aqui</div>
Download da imagem central do Button: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] (Adicione na pasta imagens).
Créditos: Je4n
