blocks|key|4155030|text|这是我用来设计组件样式的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4155031|a[href="history.html"]+{|offset|length|style|CODE|4155032|color:+white;|4155033|text-decoration:+none;+}|4155034|另外，有必要使用<button>标记吗？你能不能只给你的<a>标签一个类？像这样|4155035|<a+href="something.html"+class="btn">Something</a>|code-block|syntax|javascript|4155036|然后是css|4155037|a.btn+{color:+black;+text-decoration:+none}
a.btn:visited+{color:+purple}
a.btn:hover+{color:+grey}|4155038|更像是这样|4155039|entityMap^0|0|0|O|0|0|D|0|0|O|0|8|8|S|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@$D|15|E|16|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1A|8|@$D|1B|E|1C|F|G]|$D|1D|E|1E|F|G]]|9|@]|A|$]]|$1|N|3|O|5|P|7|1F|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|1G|8|@]|9|@]|A|$]]|$1|U|3|V|5|P|7|1H|8|@]|9|@]|A|$Q|R]]|$1|W|3|X|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|Z|$]]

<p>This is what i did to style the component:</p>

<p><code>a[href="history.html"] {</code><br>
  <code>color: white;</code><br>
  <code>text-decoration: none;
}</code></p>

<p>Also, is it necessary to use a <code>&lt;button&gt;</code> tag? Can you not just give a class to your <code>&lt;a&gt;</code> tag? Like this  </p>

<pre><code>&lt;a href="something.html" class="btn"&gt;Something&lt;/a&gt;
</code></pre>

<p>Then the css</p>

<pre><code>a.btn {color: black; text-decoration: none}
a.btn:visited {color: purple}
a.btn:hover {color: grey}
</code></pre>

<p>And more like that</p>


blocks|key|4155087|text|1、button和a是两个不同的东西。不要在button中嵌套a。您可以将它们用于完全不同的目的。a是用于link的，所以链接一些东西。您可以将其用于事件，例如窗体中的submit或javascript中的事件。所以要么使用button，要么使用a。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4155088|在你的例子中，我看到你想要链接一些东西，所以使用a+(没有按钮)。|4155089|2、.card+>+button+a:link是错误的，因为>是一个direct+descendant+selector，但button在.text中，而.card在其中。所以button不是.card的直系后代。|4155090|3，.card+>+button+a:hover,+button+a:active+{会选择button中的card的直系后代的a:hover。(见2)它将在页面上的任何地方选择button中的所有a:active，因此不仅仅是card中的那些。如果你想这样做，你应该将父选择器添加到两个选择器中。因此您的代码应该类似于.card+>+button+a:hover,+.card+>+button+a:active|4155091|第2,3点仅供参考，以便将来对您有所帮助，但它们在这里没有用，因为您不会在button中使用a。|4155092|要像button一样设置a的样式，只需在下面的选择器中编写样式|4155093|.card+.text+>+button,.card+.text+>+a+{，然后对于hover和active状态使用|4155094|.card++.text+>+a:hover,+.card+.text+>+a:active+{|4155095|请参阅下面的代码片段。如果您有任何其他问题，请在评论中提问。|4155096|​|4155097|/*+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%2BOne%7CLora');

+body+{
++++++++font-size:+120.0%25;+/*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%25;
+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%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%25;
++++
}

++.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%25;
++}

+.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;
++++++
++}|code-block|syntax|javascript|4155098|++<div+id="wrapper">


+++
++<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>
+<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>

+
+<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>
++++++
+
++++
++
++++<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>|4155099|4155100|entityMap^0|2|6|9|1|M|6|V|1|1D|1|1H|4|2C|6|2J|A|34|6|3F|1|0|O|1|0|2|L|U|1|Y|Q|1Q|6|1X|5|25|5|2G|6|2O|5|0|2|15|1A|6|1I|4|1S|7|2H|6|2R|8|36|4|4G|1B|0|11|6|1A|1|0|2|6|C|1|0|0|12|17|5|1D|6|0|0|1C|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1S|8|@$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1V|8|@$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]|$9|20|A|21|B|C]|$9|22|A|23|B|C]|$9|24|A|25|B|C]|$9|26|A|27|B|C]|$9|28|A|29|B|C]|$9|2A|A|2B|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|2C|8|@$9|2D|A|2E|B|C]|$9|2F|A|2G|B|C]|$9|2H|A|2I|B|C]|$9|2J|A|2K|B|C]|$9|2L|A|2M|B|C]|$9|2N|A|2O|B|C]|$9|2P|A|2Q|B|C]|$9|2R|A|2S|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|2T|8|@$9|2U|A|2V|B|C]|$9|2W|A|2X|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|2Y|8|@$9|2Z|A|30|B|C]|$9|31|A|32|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|33|8|@$9|34|A|35|B|C]|$9|36|A|37|B|C]|$9|38|A|39|B|C]]|D|@]|E|$]]|$1|R|3|S|5|6|7|3A|8|@$9|3B|A|3C|B|C]]|D|@]|E|$]]|$1|T|3|U|5|6|7|3D|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|3E|8|@]|D|@]|E|$]]|$1|X|3|Y|5|Z|7|3F|8|@]|D|@]|E|$10|11]]|$1|12|3|13|5|Z|7|3G|8|@]|D|@]|E|$10|11]]|$1|14|3|W|5|6|7|3H|8|@]|D|@]|E|$]]|$1|15|3|-4|5|6|7|3I|8|@]|D|@]|E|$]]]|16|$]]

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

<p>In you case, i see that you want to link something so use <code>a</code> ( without button ).</p>

<p>2, <code>.card &gt; button a:link</code> is wrong because <code>&gt;</code> is a <code>direct descendant selector</code> but <code>button</code> is inside <code>.text</code> which is inside <code>.card</code>. So <code>button</code> is not a direct descendant of <code>.card</code>. </p>

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

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

<p>To style <code>a</code> just like the <code>button</code> just write the styles inside the following selector</p>

<p><code>.card .text &gt; button,.card .text &gt; a {</code> and then for <code>hover</code> and <code>active</code> states use </p>

<p><code>.card  .text &gt; a:hover, .card .text &gt; a:active {</code></p>

<p>See code snippet below. If you have any other questions, ask in the comments.</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>/* 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 &lt;a&gt; 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 &gt; button,.card .text &gt; 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 &gt; a:hover, .card .text &gt; 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;
      
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div id="wrapper"&gt;


  &lt;!-- Navigation bar --&gt; 
  &lt;nav role="navigation"&gt; 
  &lt;a href="index.html"&gt;HOME&lt;/a&gt;  
  &lt;a href="about.html"&gt;ABOUT&lt;/a&gt;  
  &lt;a href="#"&gt;GALLERY&lt;/a&gt;  
  &lt;a href="https://jewishgen.org" target="_blank"&gt;JEWISHGEN&lt;/a&gt;  
  &lt;/nav&gt; 

 &lt;!-- Header --&gt;
&lt;header&gt;
 &lt;h1&gt;Opening the Door to Stavisht, the Shtetl&lt;/h1&gt;
 &lt;h3&gt;Stavishche, Ukraine  - 49° 23' N 30° 12' E&lt;/h3&gt;
 
 &lt;span&gt;Stavishche [Ukr, Rus], Stavisht [Yid], Stawiszcze [Pol], Stawyszcze, Stavische, Stavishcha, Stavysce&lt;/span&gt;
&lt;/header&gt;

 &lt;!-- Page content --&gt;
 &lt;p style="font-style: italic; text-align: center;"&gt;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. &lt;br&gt; Enjoy your visit!&lt;/p&gt;
      
 
    &lt;!-- Flexbox menu to inner pages --&gt;
  
    &lt;main class="cards" role="navigation"&gt;
        &lt;article class="card"&gt;
          &lt;img src="images/seige.jpg" alt="old map" width="200" height="160"&gt;
          &lt;div class="text"&gt;
            &lt;h4&gt;HISTORY / MAPS&lt;/h4&gt;
            &lt;p&gt;Explore the history of Stavishche from its founding as a garrison to the times of the pograms.&lt;/p&gt;
           &lt;a href="history.html" &gt;HISTORY&lt;/a&gt;
          &lt;/div&gt;
        &lt;/article&gt;
        
        &lt;article class="card"&gt;
          &lt;img src="images/lechtzer.jpg" alt="Lechtzer family" width="200" height="160"&gt;
          &lt;div class="text"&gt;
            &lt;h4&gt;PEOPLE&lt;/h4&gt;
            &lt;p&gt;Discover the residents of Stavishche at the turn of the century through the database of almost 2,000 residents.&lt;/p&gt;
            &lt;button&gt;RESIDENTS&lt;/button&gt;
          &lt;/div&gt;
        &lt;/article&gt;

        &lt;article class="card"&gt;
          &lt;img src="images/cemetery2.jpg" alt="cemetery" width="200" height="160"&gt;
          &lt;div class="text"&gt;
            &lt;h4&gt;BURIALS&lt;/h4&gt;
            &lt;p&gt;Find cemeteries throughout the world where Stavishters remain together in death.&lt;/p&gt;
            &lt;button&gt;CEMETERIES&lt;/button&gt;
          &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class="card"&gt;
          &lt;img src="images/torahcrown.jpg" alt="Torah crown" width="200" height="160"&gt;
          &lt;div class="text"&gt;
            &lt;h4&gt;STORIES&lt;/h4&gt;
            &lt;p&gt;Imagine our ancestors lives through essays from Stavishters, their children, and grandchildren. &lt;/p&gt;
            &lt;button&gt;READ&lt;/button&gt;
          &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class="card"&gt;
          &lt;img src="images/citysign.jpg" alt="Stavishche sign" width="200" height="160"&gt;
          &lt;div class="text"&gt;
            &lt;h4&gt;STAVISHCHE TODAY&lt;/h4&gt;
            &lt;p&gt;Visit Stavishche of today through online links, images, and videos.&lt;/p&gt;
            &lt;button&gt;VISIT&lt;/button&gt;
          &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class="card"&gt;
          &lt;img src="/pix/samples/16l.jpg" alt="Sample photo" width="200" height="160"&gt;
          &lt;div class="text"&gt;
            &lt;h4&gt;MORE&lt;/h4&gt;
            &lt;p&gt;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.&lt;/p&gt;
            &lt;button&gt;THANK YOU&lt;/button&gt;
          &lt;/div&gt;
        &lt;/article&gt;
      &lt;/main&gt;</code></pre>
</div>
</div>
</p>


<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>


Need help styling buttons using Flexbox CSS

HTML5

我正在尝试在Flexbox代码中设置历史按钮的样式，以匹配导航栏链接的样式。我似乎不能获得悬停，活动，访问，链接CSS代码来应用于整个按钮。此外，该链接根本不会在Firefox中打开，但会在Chrome和MS Edge中打开历史记录页面。 .card .text > button {background: #6e6b5...

问需要使用Flexbox CSS设计按钮样式的帮助
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要使用Flexbox CSS设计按钮样式的帮助EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要使用Flexbox CSS设计按钮样式的帮助
EN