Hola alguien sabe porque cuando hago click en el boton me sale ese borde negro, ¿se lo puede quitar? Este es el html de esa seccion <cod...

Hola alguien sabe porque cuando hago click en el boton

me sale ese borde negro, ¿se lo puede quitar?

Este es el html de esa seccion

<<section class="products">

   <div class="product-1">
      <figure class="Container 1">
        <img class="image-product" src="images/pan-frances.jpg" >
      </figure>
      <div class="product-description 1">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>
       <button type="button" class="buy-pan">Lo necesito</button>
    </div>

    <div class="product-2">
      <figure class="Container 2">
        <img class="image-product" src="images/pan-integral.jpg" alt="">
      </figure>
      <div class="product-description 2">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
        <button type="button" name="button" class="buy-pan">Lo necesito</button>
      </div>
    </div>
  </section>>

Y este es el css

.hero{
  margin: 5%;
}

.title {
  text-align: center;
  font-family: Arial;
  color: #707070;
}

.products {
  display: flex;
  width: 75%;
  margin: auto;
  font-family: Ebrima;
}

.product-container {
  width: 100%;
  height: 44%;
  justify-content: center;
  margin: 0;
}

.product-1 {
  width: 100%;
  margin: 0 10%;
  text-align: center;
  box-shadow: 0 0 10px #c1bcbc;
}

.product-2{
  width: 100%;
  margin: 0 10%;
  text-align: center;
  box-shadow: 0 0 10px #c1bcbc;
}

.image-product {
  width: 100%;
}

.buy-pan {
  text-align: center;
  background: #2356E2;
  color: white;
  padding: 15px;
  border-radius: 7px;
  width: 100%;
  border: 0;
  margin: 0;
}

.buy-pan:hover {
  background: #2b4488;
}

.buy-pan:active {
  background: #35373e;
}