Botão Efeito Translate e Box Shadow

Botão Efeito Translate e Box Shadow

Neste artigo vamos criar um Botão com Efeito Translate e Box Shadow.

box-shadow é uma propriedade do CSS, é utilizado para adicionar efeitos de sombra em volta de um elemento. Você pode especificar mais de um efeito, os separando com virgulas. Uma box-shadow é descrita pelo deslocamentos (offset) X e Y em relação ao elemento, desfoco e propagação do raio e cor.

Vamos Adicionar o Html:

  <div class="btn-shadow">
    <a href="#" class="translate-box-shadow"><i class="icon icon-cube"></i> Developer</a>
  </div>

  <div class="btn-shadow">
    <a href="#" class="translate-box-shadow"><i class="icon icon-cube"></i> Html5</a>
  </div>

  <div class="btn-shadow">
    <a href="#" class="translate-box-shadow"><i class="icon icon-cube"></i> Css3</a>
  </div>

   <div class="btn-shadow">
    <a href="#" class="translate-box-shadow"><i class="icon icon-cube"></i> jQuery</a>
  </div>

Vamos Adicionar o Css:

/*Botão Shadow*/
.btn-shadow   { margin-right:20px; float:left; }
.btn-shadow a {
  text-decoration:none;
  display: inline-block;
  font-size: 1.1em;
  font-family:Verdana, Geneva, sans-serif;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

/*TRANSLATE E BOX SHADOW*/

.translate-box-shadow {
  padding: 20px 40px;
  color: #fff;
  background-color: #4c4c4c;
  border-radius:50px;
}
.translate-box-shadow:hover {
  color: #23cad1;
  -webkit-box-shadow: -8px -8px 0 #23cad1;
  -moz-box-shadow: -8px -8px 0 #23cad1;
  box-shadow: -8px -8px 0 #23cad1;
  -webkit-transform: translate(8px, 8px);
  -moz-transform: translate(8px, 8px);
  -ms-transform: translate(8px, 8px);
  -o-transform: translate(8px, 8px);
  transform: translate(8px, 8px);
}
/*Botão Shadow*/

Veja o Resultado!

Baixar Código Veja Funcionando