Problema botão

Boa tarde , estou com um problema no botão e não consigo resolver. Tenho 2 botoes e duas colunas . A coluna prefeitura e a coluna cidadão. Na coluna cidadão a palavra cidadão fica com uma ancora de link mas nao necessito dela. Somente de dois botões com link. Alem disso ao colocar o mouse é criado uma linha entre os dois botões. Como resolver?

<div class="container">
    <div class="row">


      <div class="col-md-6">

      <figure class="snip1376">
        <img src="img/prefeitura.jpg" class="img-responsive">
        <figcaption>

         <h2>Prefeitura</h2> 
        <br>
            <center>
           <!--  <a href="http://www.souzem.com.br/login.jsp" </a><button> Acesse </button>-->
              <button>Guia</button> 
            </center>

        </figcaption>
      </figure>

       </div>



      <div class="col-md-6">

      <figure class="snip1376">
        <img src="img/pop1.jpg" class="img-responsive">
        <figcaption>

         <h2>Cidadão</h2>
           <br>

            <center>
             <a href="http://www.souzem.com.br/identification.jsp"</a><button> Acesse </button>
              <a href="http://www.google.com.br"</a><button>Guia </button>
            </center>

        </figcaption>
      </figure>

     </div>


 </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:200);




.snip1376 * {
  -webkit-box-sizing: border-box;

}
.snip1376 img {
  max-width: 100%;
  vertical-align: top;
}
.snip1376 figcaption {
  width: 100%;
  background-color: #ffffff;
  padding: 15px 25px 65px;
  position: relative;
}



/* botao */

button{
  background:#1AAB8A;
  color:#fff;
  border:none;
  position:relative;
  height:60px;
  font-size:1.6em;
  padding:0 2em;

}