Button em CSS 08.11.14 12:59
Demonstração: Clique Aqui
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">PPF</div>
Download da imagem central do Button: Clique aqui (Adicione na pasta imagens).
Créditos;
Je4n - Codificação
XenFocus - BackGround
Eu - Postar para vocês
Lιηχ • 19.11.14 17:24
