Box-shadow – Botão Hover com Borda Interna com CSS

Neste artigo vamos fazer um botão responsivo com a borda interna quando passamos o mouse. usando o efeito de sombra Box-shadow no css.

Vamos Adicionar o Html:

<div class="box-botao margin-bottom-div">
                
   <a href="#" target="_blank" class="btn-borda">Saiba mais</a>
   <a href="#" target="_blank" class="btn-borda">Sobre</a>
   <a href="#" target="_blank" class="btn-borda">Html5</a>
   <a href="#" target="_blank" class="btn-borda">Css3</a>
                
</div><!--Box com 4 Botões-->

<div class="box-botao margin-bottom-div">
                
   <a href="#" target="_blank" class="btn-borda"><i class="icon icon-arrow-circle-right"></i> Html5</a>
   <a href="#" target="_blank" class="btn-borda"><i class="icon icon-arrow-circle-right"></i> Css3</a>
                
</div><!--Box com 2 Botões-->

<div class="box-botao">
                
   <a href="#" target="_blank" class="btn-borda"><i class="icon icon-flash"></i> Saiba mais...</a>
                
</div><!--Box com 1 Botão-->

Vamos Adicionar o Css:

/*Botão Hover com Borda Interna*/
.margin-bottom-div { 
  
  margin-bottom:1em!important; 

}

.box-botao { 
  
  width:100%; 
  float:left; 
  margin:auto; 
  text-align:center; 
}

.box-botao a {
  
  width:100%;
  margin-bottom:0.3em; 
  text-decoration:none;
  display: inline-block;
  font-size: 1em;
  font-family:'open_sansregular';
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;

}

.btn-borda { 

	padding:15px 20px; 
	color:#fff; 
	background-color:#4d4d4d; 
}

.btn-borda:hover { 
   
   color: #fff;
  -webkit-box-shadow: inset 0 0 0 5px #2fcacf;
  -moz-box-shadow: inset 0 0 0 5px #2fcacf;
   box-shadow: inset 0 0 0 5px #2fcacf;

}
/*Botão Hover com Borda Interna*/

/*Design Responsivo*/

/*480 dividido por 16 = 30em*/
@media (min-width:30em){

  .box-botao a { width:48%;}

}
/*960 dividido por 16 = 60em*/
@media (min-width:60em){

   .box-botao a { width: 24.58%; margin-bottom:0; }

}

Baixar Código Veja Funcionando