29 de jul. de 2012

Criando botão de download

 Fala aí gente, aqui é o Anon e hoje venho trazer mais um tutorial pra vocês! No tutorial de hoje irei ensinar a como fazer um botão de download (assim como os que usamos).
 Primeiramente acesse a página de editar HTML do blogger e busque por:

]]></b:skin>

 Acima desta linha iremos adicionar o seguinte código:

.down a{
  background-color:#XXXXXX;
  height:XXpx;
  font-family:XXXX;
  font-size:XXpx;
  color:#XXXXXX;
  padding:2px 2px 2px 2px;
  border:#XXXXXX Xpx solid;
  border-radius:XXpx;
 }

.down a:hover{
  background-color:#XXXXXX;
  height:XXpx;
  font-family:XXXX;
  font-size:XXpx;
  color:#XXXXXX;
  padding:2px 2px 2px 2px;
  border:#XXXXXX Xpx solid;
  border-radius:XXpx;
 }

Estudando o código
 Na parte ".down a{" é onde definimos as devidas características do botão antes de passar o mouse em cima. Já na parte ".down a:hover{" é onde definimos as características do botão ao passar o mouse em cima.

Notas

background-color:#XXXXXX; Neste trecho definimos a cor de fundo do botão.
height:XXpx; Neste trecho definimos a altura do botão.
font-family:XXXX; Neste trecho definimos a fonte que será usada (Aria, Impact, etc).
font-size:XXpx; Neste trecho definimos o tamanho da fonte.
color:#XXXXXX; Neste trecho definimos a cor da fonte.
padding:2px 2px 2px 2px; Neste trecho definimos as distâncias internas entre o texto e seu fundo.
border:#XXXXXX Xpx solid; Neste trecho definimos as características da borda. (EX: border:#000 1px solid;).
border-radius:XXpx; Neste trecho definimos a curvatura das bordas.


 Agora vamos ao código para se usar o botão que deve ser inserido no HTML da postagem:

<div class='down'><a href='LINK DA PÁGINA' target='_blank'>Texto do botão</a></div>







Links úteis
Gradient com CSS3

 Só isso.. gostaram? Então comentem!