[criamos, desenvolvemos e entregamos seu website.]

{Gostamos de compartilhar nossos conhecimentos, acreditamos assim, que todos melhoram e podemos contruir um mundo mais justo e menos desigual}


Botões com movimento em CSS3

Muitas pessoas tem nos perguntado sobre o efeito que usamos nos botões para o site da Behave. Muitos acreditavam que usávamos flash e imagens e duvidaram que seria possível utilizar apenas CSS para fazer o efeito. 

 

Bem, aqui vai um tutorial de como é possível fazer belos botões com pouco código e de maneira elegante.

Vejo o exemplo do botão funcionando clicando aqui.

Primeiro vamos ao html:

 

<a href="#">
	<div class="button">Leia mais</div>
</a>

 

Prontinho! Agora vamos ao CSS, no caso do site da Behave utilizamos:

 

.button {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	border: 2px solid #AB423F;
	border-radius: 0 5px 5px 0;
	box-shadow: 0 0 0 1px #CA4E4A inset, 2px 2px 0 rgba(0, 0, 0, 0.15);
	color: #E0DED8;
	padding: 6px 0;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 0 #CE504C;
	width: 250px;
	margin-top: 20px;
	cursor: pointer;
	font-size: 1.5em;
	float: left;
	background: #AB423F;
}

.button: hover {
	background-color: #D58C41;
	border: 2px solid #D58C41;
	box-shadow: 0 0 0 1px #E49B50 inset, 2px 2px 0 rgba(0, 0, 0, 0.15);
	color: #E0DED8;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
	width: 300px;
}

 

Agora vamos entender o que cada parte faz. Para dar o movimento, usamos a propriedade Transition (disponível para os navegadores modernos, exceto o Internet Explorer =/ ), que permite a mudança de estilização de um elemento HTML de uma forma suave e controlada no tempo. 

Declaramos no css os prefixos proprietários (-moz-, -webkit-, -o-), cada uma corresponde a um browser. Seguimos com a propriedade "all" para o efeito em todas as propriedades elegíveis para transição, seguida do tempo (em segundos) em que a animação deve ocorrer e o efeito que deve fazer.

Há vários tipos de efeitos disponíveis, como ease, linear, ease-in, ease-out, ease-in-out e cubic-bezier.

Os outros elementos são conhecidos, como border, color, background, shadows etc. e você pode definir como quiser.

Agora você pode e deve usar sua criatividade para fazer seus próprios botões e se tiver alguma dúvida, é só usar o campo abaixo para perguntar. =)

Anexos:


botoes-css-behave  
Categorias: CSS | html | CSS3
1 comentário(s) =)
Tweetar

  1. legal


    Responder
    rafael
    Comentado Thursday
    17 de July de 2014
    às 15:52:26

O que você acha?