Botão Efeito Sombra com Css

Botão Efeito Sombra com Css

Neste artigo veja como fazer um Botão Efeito Sombra com Css.

Vamos Adicionar o Html:

<a href="" class="botao sombra-down"><i class="icon icon-coffee"></i> Leia mais</a>
<a href="" class="botao sombra-down"><i class="icon icon-heart-1"></i> Leia mais</a>
<a href="" class="botao sombra-down"><i class="icon icon-flash"></i> Leia mais</a>

Vamos Adicionar o Css:

.botao {

   position: relative;
   display: block;
   width: 150px;
   float:left;
   margin-left:10px;
   padding: 0.8em 0.5em;
   background-color: #fff;
   border: 1px solid #dbdbdb;
   color: #000;
   text-align: center;
   text-decoration: none;
   transform-style: flat;
   transition: all 300ms ease-out;
   border-radius: 4px;
   color: #868686;
}

.botao:hover { color:#000000; }

.botao:before, .botao:after {
  content: "";
  position: absolute;
  z-index:2;
  transition: all 300ms ease-out;
}


/* Efeito Sombra Down */
.sombra-down:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sombra-down:hover {
  border: 1px solid #f0f0f0;
}
.sombra-down:hover:before {
  box-shadow: 0 15px 10px -10px rgba(32, 32, 32, 0.6);
}

Veja o Resultado!

Baixar Código Veja Funcionando