title: How do I make text in a CSS button appear only on hover?
body: <p>I made some CSS div buttons on an example website which are used in a sidebar navigation menu. I was just wondering how one would go about making it so that text appears only when the mouse is hovered over the button. </p>
  
  <p>If there was a way to include the text (ex: "Click Here!") in the CSS under the hover part for the div only, that would work, but I don't think you can do that. If I include it in the HTML, then it shows up regardless of hover or not.</p>
  
  <p>The example website is here: <a href="http://www.arthiaravind.com/nursery/" rel="nofollow">http://www.arthiaravind.com/nursery/</a></p>
  
  <p>Ideally, the buttons would be blank, and then when they're hovered over, they would extend and the link would appear. </p>
  
  <p>Here is the code for the first button:</p>
  
  <pre><code>.button1 {
      position: fixed;
      margin-top: 100px;
      margin-left: 730px;
      width:70px;
      height:50px;
      text-align:right;
      padding: 0px 50px 0px 0px;
      background:#75AD38;
      transition:width 2s;
      -moz-transition:width 2s; /* Firefox 4 */
      -webkit-transition:width 2s; /* Safari and Chrome */
      -o-transition:width 2s; /* Opera */
  }
  </code></pre>
  
  <p>Here is the code for when you hover:</p>
  
  <pre><code>.button1:hover{ 
      width:200px;
  }
  </code></pre>
  
  <p>Any suggestions for making my code more streamlined would also be appreciated, as I currently have this code copypasted for each of the five buttons, which I know is clunky but I don't know how to make them all the same type of button but then position them individually.</p>
  
  <p>I also don't know why the buttons extend when you load the page. That isn't supposed to happen.</p>
  
  <p>Thank you!</p>