title: Selecting <a> tag in CSS stylesheet
body: <p>I've been trying to format the following code (HTML part).</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>.buttons {
    text-align: center;
  }
  
  a.buttons {
    font-family: 'PT Sans';
    color: white;
    font-size: 20px;
    background-color: gray;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: padding 1s;
  }
  
  a.buttons:hover {
    background-color: lightgray;
    padding: 20px 30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="buttons"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
  &lt;a href="http://linkto.bandcamp.com"&gt;Bandcamp&lt;/a&gt;
  &lt;a href="C:\Users\asdffds\Desktop\website\management.html"&gt;Booking&lt;/a&gt;
  &lt;a href="#news"&gt;News&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I can't seem to get it work. Can someone help find the mistake?</p>