title: Why is my button changing whenever I press it?
body: <p>Whenever I press the button it changes its radius and adds a white line under the box. The idea is that the button stays in the same shape that was before, the only difference should be the shadow dissapearing the way it already does.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.boton{ 
      font-weight: bold;
      margin: 20px;
      padding: 5px;
      background-color: white;
      border-color: black;
      color:black;
      cursor: pointer;
      border-radius:none;
      box-shadow: 5px 6px rgb(0, 0, 0);
      outline: none;
  }
  
  .boton:hover {
      color:black;
      transform: translateY(1px);
  }
  
  .boton:active {
      outline: none;
      padding: 5px;
      color:black;
      transform: translateY(6px);
      box-shadow: none;
      border-radius: none;
      border-color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'&gt;
      &lt;title&gt;Hello, world!&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
       &lt;button class="boton" href="#about"&gt;CLICK!&lt;/button&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>