title: div button to slide in and off screen (depending user's mouse)
body: <p>I have a div with class .<code>side-buttons</code>. This div will slide in and off when user's mouse hover over the div. I was wondering how can I hide the div completely and say when the user's mouse is in the area it would slide in?</p>
  
  <p>I tried getting the off the screen but that wouldn't work as it would only work when my mouse on the div</p>
  
  <p>This is my website - <a href="http://smati.ca/test/index.html" rel="nofollow noreferrer">http://smati.ca/test/index.html</a> (Don't click continue but instead click around the popup modal to get off the modal overlay. There you can see the div in action) </p>
  
  <p>Here's my css code :</p>
  
  <pre><code>.side-buttons {
      position: absolute;
      right: -100px;
      top: 55%;
      -webkit-transition: all .4s ease-in-out;
      -moz-transition: all .4s ease-in-out;
      -ms-transition: all .4s ease-in-out;
      -o-transition: all .4s ease-in-out;
      transition: all .4s ease-in-out;
  }
  
  .side-buttons:hover {
      right: 0px;
  }
  
  .side-buttons a {
      display: block;
      background: linear-gradient(to bottom, #33a9c3 15%, #b1ccbb 100%);
      border-radius: 0;
      box-shadow: none;
      border: none;
      color: #f5f5f5;
      font-size: 22px;
      font-family: "Lato", sans-serif;
  }
  
  .side-buttons a small {
      font-size: 16px;
  }
  
  .side-buttons a:hover,
  .side-buttons a:focus,
  .side-buttons a:active {
      background: linear-gradient(to bottom, #33a9c3 15%, #b1ccbb 100%);
      color: #f5f5f5;
  }
  
  .side-buttons a:nth-child(2) {
      background: linear-gradient(to left, #de3c88 15%, #f0a473 100%);
  }
  </code></pre>