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 {
background: #FF9900 url(./imagens/titulo.png) repeat-x 0 100%;
width: 100px;
height: 40px;
line-height: 40px;
float: left;
cursor: pointer;
padding-left: 6px;
padding-right: 6px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
font-family: Segoe UI;
font-size: 13px;
color: #FFF;
text-transform: uppercase;
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
font-weight: bold;
text-align: center;
border-bottom: 2px solid rgba(0, 0, 0, 0.3);
margin-bottom: 8px;
transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-webkit-transition: background .5s ease-in-out;
}
.button:hover {
background-color: #039ACF;
transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-webkit-transition: background .5s ease-in-out;
}
.button:active {
background-color:#55b5ed;
border-bottom-width:1px;
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 (Codificação) & XenFocus (Background)
