Eae pessoal, para um projeto que fiz aqui eu fiz um botão em CSS3 com um efeito de 'clique'.. Enfim, vejam como é feito:
Primeiro fazemos nosso HTML
E agora nosso CSS
É algo bem simples, coloquei mais para estudos mesmo, espero que seja útil..
Vejam o efeito final: http://jsfiddle.net/Wagner/geq9T/2/embedded/result/
Primeiro fazemos nosso HTML
- Código:
<button class="myButton">Clique aqui</button>
E agora nosso CSS
- Código:
.myButton{
background: #38b0dc;
padding: 10px 30px;
border-radius: 4px;
box-shadow: 0px 5px 0px #156785;
border: none;
cursor: pointer;
color: #fff;
display: block;
margin: 1em auto;
text-align: center;
/* necessário para o efeito do clique */
position: relative;
}
/* efeito ao clicar no botão */
.myButton:active{
box-shadow: 0px 1px 0px #156785;
top: 3px;
}
É algo bem simples, coloquei mais para estudos mesmo, espero que seja útil..
Vejam o efeito final: http://jsfiddle.net/Wagner/geq9T/2/embedded/result/