Need help styling buttons using Flexbox CSS

Question

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.

 .card .text > button {
background: #6e6b5c;
border: 0;
font-family: 'Days One', sans-serif;
font-weight: normal;
color: lightgrey;
/*text-decoration: none;*/
padding: 10px;
width: 100%;
}

.card > button a {
text-decoration: none;

}

.card > button a:link, button a:visited {
background: #6e6b5c;
color: lightgrey;
text-decoration: none;
}

.card > button a:hover, button a:active {
    background-color: #7d654b;
    color: white;   
    text-decoration: none;
}

The Codepen is here: https://codepen.io/Ovimel/pen/dKgrXa

The Codepen post requesting help is here: https://codepen.io/Ovimel/post/help-styling-css-flexbox-buttons (but I'm not sure how people even find these pins and posts! New to Codepen as well).

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 https://www.quackit.com/html/html_editors/scratchpad/?example=/css/flexbox/examples/flexbox_cards_align-items_stretch made my style adjustments based on the Nav code and eventually added the link which then caused all sorts of problems.

Why not make a `.button` class responsible for standard styling of buttons in general, then place them where you want? — ChiefTwoPencils, Jun 28 '18 at 00:58
Looks like similar issue [Link](https://stackoverflow.com/questions/16280684/nesting-a-inside-button-doesnt-work-in-firefox) — VikrantGharat, Jun 28 '18 at 04:53
`button` and `a` are two different things. DO NOT nest `a` inside `button`. You use them for completely different purposes. `a` is for `link` so linking something. `button` you use it for events for example a submit in a form or an event in javascript. So either use `button` either use `a`. — Mihai T, Jun 28 '18 at 07:28
Thank you ChiefTwoPencils and Vikrant - good to know about the button/link in Firefox and idea to create a .button class. That was my next plan of attack. I was unaware of proper coding for buttons, links. Thanks Mihai. — Ovimel, Jun 28 '18 at 16:41

score 0 · Answer 1 · answered Jun 28 '18 at 00:59

This is what i did to style the component:

a[href="history.html"] {
color: white;
text-decoration: none; }

Also, is it necessary to use a <button> tag? Can you not just give a class to your <a> tag? Like this

<a href="something.html" class="btn">Something</a>

Then the css

a.btn {color: black; text-decoration: none}
a.btn:visited {color: purple}
a.btn:hover {color: grey}

And more like that

score 0 · Accepted Answer · answered Jun 28 '18 at 07:44

1, button and a are two different things. DO NOT nest a inside button. You use them for completely different purposes. a is for link so linking something. button you use it for events for example a submit in a form or an event in javascript. So either use button either use a.

In you case, i see that you want to link something so use a ( without button ).

2, .card > button a:link is wrong because > is a direct descendant selector but button is inside .text which is inside .card. So button is not a direct descendant of .card.

3, .card > button a:hover, button a:active { would select a:hover inside button the direct descendant of card. ( See 2) and it will select ALL a:active that are inside button everywhere on the page, so not only the ones that are inside card. If you want to do that you should add the parent selector to both selectors. so your code would look like .card > button a:hover, .card > button a:active

Point 2,3 are just for info to help you in the future, but they are useless here because you won't have a inside button.

To style a just like the button just write the styles inside the following selector

.card .text > button,.card .text > a { and then for hover and active states use

.card .text > a:hover, .card .text > a:active {

See code snippet below. If you have any other questions, ask in the comments.

/* style.css */

/* Make HTML5 layout elements block elements for older browsers */ 
 header, nav, aside, article, footer, section { 
  display: block; 
  } 

  @import url('https://fonts.googleapis.com/css?family=Days+One|Lora');

 body {
        font-size: 120.0%; /*14pt  19px */
        font-family: 'Lora', serif;
        line-height: 1.375;
        background-color: lightsteelblue;
        background-image: url(images/wood.jpg);
}
header{
    text-align: center;
}
 h1{
    text-align: center;
    font-family: 'Days One', sans-serif;
    line-height: 1.250;
    font-size: 2.500em; /*32pt 42px */
    font-weight: bold;
    font-style: normal;
    padding-top: 1em;
}

h2{
    font-family: 'Lora', serif;
    line-height: 1.333;
    font-size: 1.500em; /*18pt 24px */
    font-weight: 700;
    font-style: italic;
}

h3{
    font-family: 'Lora', serif;
    line-height: 1.333;
    font-size: 1.200em; /*14pt 19px */
    font-weight: 700;
    font-style: italic;
}

header h3 {
    font-style: normal;
    margin: 0;
}

p {
    font-size: 1.000em; /*12pt 16px */
    font-weight: normal;
    font-style: normal;
}

p.footnote {
    font-size: .95em; /*11 pt 15px */
}
/*style rules for paragraph text links */
p a {
    text-decoration: none;
    font-weight: bold;
    
}
p a:link, a:visited {
    color: #7d654b;
}

p a:hover, a:active {
    text-decoration: underline;
}
 /*style rule for wrapper div */
 #wrapper {
 width: 90%;
 min-width: 600px;
 max-width:1200px;
 margin: 1em auto;
 padding: 3em;
 background-color: rgb(228, 238, 248);
 }
 
 /*style rule for <a> tags in the nav section #945D60 */

  nav a {
      background-color: #6e6b5c;
      font-family: 'Days One', sans-serif;
      line-height: 1.333;
      font-size: .90em; /*11pt 15px */
      font-weight: 500;
      color: white;
      text-decoration: none;
      outline: none;
      padding: 10px 0;
      display: block;
      float: left;
      border: solid 3px #194a76; 
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      width: 25%;
      text-align: center;
      box-sizing: border-box;

      /*box sizing for older browsers */
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
  }

      /*unvisited and visited nav link styling */
  nav a:link, nav a:visited {
      background-color:#6e6b5c;
      color: lightgrey;
  }

/* hover and tap nav link styling */
  nav a:hover, nav a:active {
        background-color: #7d654b;
        color: white;
    }

article {
    clear: both;
    padding: 0 1em;
}

  .cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 30px 0 0;
}

  .card {
    flex: 0 0 200px;
    margin: 10px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
    text-decoration: none;
} 

  .card img {
    max-width: 100%;
    
}

  .card .text {
    padding: 0px 10px 20px;
}

  .card .text h4 {
    font-family: 'Lora', serif;
    line-height: 1.333;
    font-size: 1.0em;
    font-weight: 700;
    font-style: normal;
    margin-top: 6px;
    margin-bottom: 5px;
    text-align: center;
  }

  .card .text p {
    padding-top: 2px;
  }

  .card .text > button,.card .text > a {
    background: #6e6b5c;
    border: 0;
    font-family: 'Days One', sans-serif;
    font-weight: normal;
    color: lightgrey;
    background: #6e6b5c;
    display:block;
    font-size:14px;
    padding: 10px;
    text-align:center;
    width: 100%;
  }

 .card  a {
    text-decoration: none;
    
  }



.card  .text > a:hover, .card .text > a:active {
        background-color: #7d654b;
        color: white;   
        text-decoration: none;
}


  footer {
    background-color: #6e6b5c;
    color: white;
    text-align: right;
    padding: 10px;
    border: solid 3px #194a76; 
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  footer a {
    color: white;

  }

  .logo {
      border: solid 4px #194a76;
      float: left;
      position: relative;
      
  }

  <div id="wrapper">


  <!-- Navigation bar --> 
  <nav role="navigation"> 
  <a href="index.html">HOME</a>  
  <a href="about.html">ABOUT</a>  
  <a href="#">GALLERY</a>  
  <a href="https://jewishgen.org" target="_blank">JEWISHGEN</a>  
  </nav> 

 <!-- Header -->
<header>
 <h1>Opening the Door to Stavisht, the Shtetl</h1>
 <h3>Stavishche, Ukraine  - 49° 23' N 30° 12' E</h3>
 
 <span>Stavishche [Ukr, Rus], Stavisht [Yid], Stawiszcze [Pol], Stawyszcze, Stavische, Stavishcha, Stavysce</span>
</header>

 <!-- Page content -->
 <p style="font-style: italic; text-align: center;">The Internet has a way of bringing people together. This site is an example of how Stavisht descendants, who have met online through their own family history research, have come together to reconstruct the memories of a shtetl that existed so long ago. <br> Enjoy your visit!</p>
      
 
    <!-- Flexbox menu to inner pages -->
  
    <main class="cards" role="navigation">
        <article class="card">
          <img src="images/seige.jpg" alt="old map" width="200" height="160">
          <div class="text">
            <h4>HISTORY / MAPS</h4>
            <p>Explore the history of Stavishche from its founding as a garrison to the times of the pograms.</p>
           <a href="history.html" >HISTORY</a>
          </div>
        </article>
        
        <article class="card">
          <img src="images/lechtzer.jpg" alt="Lechtzer family" width="200" height="160">
          <div class="text">
            <h4>PEOPLE</h4>
            <p>Discover the residents of Stavishche at the turn of the century through the database of almost 2,000 residents.</p>
            <button>RESIDENTS</button>
          </div>
        </article>

        <article class="card">
          <img src="images/cemetery2.jpg" alt="cemetery" width="200" height="160">
          <div class="text">
            <h4>BURIALS</h4>
            <p>Find cemeteries throughout the world where Stavishters remain together in death.</p>
            <button>CEMETERIES</button>
          </div>
        </article>
        <article class="card">
          <img src="images/torahcrown.jpg" alt="Torah crown" width="200" height="160">
          <div class="text">
            <h4>STORIES</h4>
            <p>Imagine our ancestors lives through essays from Stavishters, their children, and grandchildren. </p>
            <button>READ</button>
          </div>
        </article>
        <article class="card">
          <img src="images/citysign.jpg" alt="Stavishche sign" width="200" height="160">
          <div class="text">
            <h4>STAVISHCHE TODAY</h4>
            <p>Visit Stavishche of today through online links, images, and videos.</p>
            <button>VISIT</button>
          </div>
        </article>
        <article class="card">
          <img src="/pix/samples/16l.jpg" alt="Sample photo" width="200" height="160">
          <div class="text">
            <h4>MORE</h4>
            <p>Give credit where credit is due.Far far away, behind the world's mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
            <button>THANK YOU</button>
          </div>
        </article>
      </main>

Thank you for the clarification on correct use of buttons and the code snippet to correct the errors and style the tag as a button. I'll have to ponder your comments on the descendant selectors. I had tried many iterations of the order, but could never get it right. Thanks again! — Ovimel, Jun 28 '18 at 16:59
Why would I even use 'button' in the code? It doesn't link to any HTML code. Can I do without it or is it there just to let me know that it's styling that tag? .card .text > **button**,.card .text > a — Ovimel, Jun 28 '18 at 18:17
@Ovimel you don't need `button` if you just want to link something. Just use `a` like you use at `HISTORY ` . I left that style in my answers just to show you or just in case you wanted to have buttons for some reason. You can have both `button` and `a` on the same page but not nested in eachother and only if you use them for different things. Like i explained in my answer — Mihai T, Jun 29 '18 at 07:36
@Ovimel then please don't forget to rate and accept my answer ( that green tick ) . thanks — Mihai T, Jul 01 '18 at 08:39

Need help styling buttons using Flexbox CSS

2 Answers2