title: [class]:hover working but [class] not working in CSS?
body: <p>I have a bit of CSS that I'm using to create a button in a table. The table is generated via a PHP query, and the button is within a cell in one of the generated table rows. When applying CSS to the button however, the :hover part it works and shows the CSS, but when I don't hover over it, the normal class doesn't work, i.e. it just shows the default icon with no CSS applied to it.</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>.btn {
    background-color: #5FB0FF;
    /* Blue background */
    border: none;
    /* Remove borders */
    color: white;
    /* White text */
    padding: 12px 16px;
    /* Some padding */
    font-size: 16px;
    /* Set a font size */
    cursor: pointer;
    /* Mouse pointer on hover */
  }
  
  
  /* Darker background on mouse-over */
  
  .btn:hover {
    background-color: RoyalBlue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>echo '&lt;td&gt;&lt;a href="php_files/PatientEdit.php?
  Patient_ID=$res[Patient_ID]\"&gt;Edit&lt;/a&gt; | &lt;a 
  href="../includes/DeletePatient.inc.php?Patient_ID=$res[Patient_ID]\" 
  onClick="return confirm("Are you sure you want to delete? ")"&gt;
  Delete&lt;/a&gt;&lt;button class="btn"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;';
  
   </code></pre>
  </div>
  </div>
  </p>