title: Need help styling buttons using Flexbox CSS
body: <p>I am trying to style the HISTORY button within the Flexbox code to match the style of the Nav bar links. I cannot seem to get the hover, active, visited, link CSS code to apply to the whole button. Also, the link does not open at all in Firefox, but opens to the History page in Chrome and MS Edge. </p>
  
  <pre><code> .card .text &gt; button {
  background: #6e6b5c;
  border: 0;
  font-family: 'Days One', sans-serif;
  font-weight: normal;
  color: lightgrey;
  /*text-decoration: none;*/
  padding: 10px;
  width: 100%;
  }
  
  .card &gt; button a {
  text-decoration: none;
  
  }
  
  .card &gt; button a:link, button a:visited {
  background: #6e6b5c;
  color: lightgrey;
  text-decoration: none;
  }
  
  .card &gt; button a:hover, button a:active {
      background-color: #7d654b;
      color: white;   
      text-decoration: none;
  }
  </code></pre>
  
  <p>The Codepen is here: <a href="https://codepen.io/Ovimel/pen/dKgrXa" rel="nofollow noreferrer">https://codepen.io/Ovimel/pen/dKgrXa</a></p>
  
  <p>The Codepen post requesting help is here: <a href="https://codepen.io/Ovimel/post/help-styling-css-flexbox-buttons" rel="nofollow noreferrer">https://codepen.io/Ovimel/post/help-styling-css-flexbox-buttons</a> (but I'm not sure how people even find these pins and posts! New to Codepen as well).</p>
  
  <p>Since I am a continual coding newbie and this is my first time using Flexbox, I borrowed the original code for the Flexbox cards from Quackit <a href="https://www.quackit.com/html/html_editors/scratchpad/?example=/css/flexbox/examples/flexbox_cards_align-items_stretch" rel="nofollow noreferrer">https://www.quackit.com/html/html_editors/scratchpad/?example=/css/flexbox/examples/flexbox_cards_align-items_stretch</a> made my style adjustments based on the Nav code and eventually added the link which then caused all sorts of problems.</p>