title: Text between the anchor tags on a button is not getting displayed
body: <p>For some reason I am unable to get the text between the anchor tags on a button to display.</p>
  
  <p>Below is my HTML and CSS code. CSS is a direct copy from <a href="https://codepen.io/Angelfire/pen/opdDt" rel="nofollow noreferrer">here</a> with some modification.</p>
  
  <p>I unable to figure out where I have gone wrong.</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>body,
  html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font: bold 14px/1.4 'Open Sans', arial, sans-serif;
      background: #EBF0DC;
  }
  
  ul {
      margin: 150px auto 0;
      padding: 0;
      list-style: none;
      display: table;
      width: 600px;
      text-align: center;
  }
  
  li {
      display: table-cell;
      position: relative;
      padding: 15px 0;
  }
  
  a {
      color: rgb(7, 5, 5) !important;
      text-transform: uppercase;
      text-decoration: none;
      letter-spacing: 0.15em;
      display: inline-block;
      padding: 15px 20px;
      position: relative;
  }
  
  ul a:after {
      background: none repeat scroll 0 0 transparent;
      bottom: 0;
      content: "";
      display: block;
      height: 2px;
      left: 50%;
      position: absolute;
      background: rgb(233, 108, 25);
      transition: width 0.3s ease 0s, left 0.3s ease 0s;
      width: 0;
  }
  
  a:hover:after {
      width: 100%;
      left: 0;
  }
  
  @media screen and (max-height: 300px) {
      ul {
          margin-top: 40px;
      }
  }
  
  
  /* Navigation ends here */
  
  h1 {
      color: #ff4411;
      font-size: 48px;
      font-family: 'Signika', sans-serif;
      padding-bottom: 10px;
      text-align: center;
  }
  
  
  /* Button */
  
  .container {
      padding-top: 1em;
      margin-top: 1em;
      border-top: solid 1px #CCC;
      width: 200px;
      margin: 20px auto;
  }
  
  a.button {
      display: block;
      position: relative;
      float: left;
      width: 120px;
      padding: 0;
      margin: 30px;
      font-weight: 600;
      text-align: center;
      line-height: 50px;
      border-radius: 5px;
      transition: all 0.2s;
  }
  
  
  /* FLOAT */
  
  .btnFloat:before {
      content: 'Float';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 120px;
      height: 50px;
      border-radius: 5px;
      transition: all 0.2s;
  }
  
  .btnBlueGreen.btnFloat:before {
      background: #00AE68;
  }
  
  .btnLightBlue.btnFloat:before {
      background: #5DC8CD;
  }
  
  .btnOrange.btnFloat:before {
      background: #FFAA40;
  }
  
  .btnFloat:before {
      box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.4);
  }
  
  .btnFloat:hover:before {
      margin-top: -2px;
      margin-left: 0px;
      transform: scale(1.1, 1.1);
      -ms-transform: scale(1.1, 1.1);
      -webkit-transform: scale(1.1, 1.1);
      box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.25);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"&gt;
      &lt;meta name="description" content="You can get coached on anything. Always free."&gt;
      &lt;title&gt;Careless2Naysayers | Life Coaching by Pradeep Kumar P&lt;/title&gt;
      &lt;link rel="stylesheet" href="./css/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;header&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
      &lt;div&gt;
          &lt;h1&gt;CareLess2Naysayers&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div class="container"&gt;
          &lt;a href="#" class="button btnFloat btnBlueGreen"&gt;Students&lt;/a&gt;
          &lt;a href="#" class="button btnFloat btnLightBlue"&gt;Teachers&lt;/a&gt;
          &lt;a href="#" class="button btnFloat btnOrange"&gt;Parents&lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is how it is getting displayed. As you can see the word 'Float' is showing up and not the one I have intended.
  <a href="https://i.stack.imgur.com/PQjQD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PQjQD.jpg" alt="enter image description here"></a></p>