title: Sticky buttons to the side of a website (not moving)
body: <p>I have two social media buttons that I'd like to keep to the side and stay there even when scrolling down, tried an <code>&lt;ul&gt;</code> but the buttons are in an awkward position on the top as of now.</p>
  
  <p><strong>Current:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/j0Tyc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j0Tyc.png" alt="home"></a></p>
  
  <p><strong>Goal:</strong> (taken from another site)</p>
  
  <p><a href="https://i.stack.imgur.com/rRlYP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rRlYP.png" alt="goal"></a></p>
  
  <p>Button:</p>
  
  <pre><code>  &lt;div class="container"&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a class="btn btn-outline-light social-media-button fa fa-facebook" href="https://www.facebook.com/infinitygroupint/"&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a class="btn btn-outline-light social-media-button fa fa-instagram" href="https://www.instagram.com/infinitygroup.ph/"&gt;&lt;/a&gt;
        &lt;li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.social-media-button {
      position: absolute;
      -ms-transform: translate(-50%, -50%);
      border: 2px solid #fff !important;
      cursor: pointer;
      font-weight: 600 !important;
      text-align: center;
      z-index: 1;
      display: block;
  }
  
  .fa {
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  
  .btn-outline-light {
      color: #f8f9fa;
      border-color: #f8f9fa;
  }
  
  .btn {
      display: inline-block;
      font-weight: 400;
      color: #212529;
      text-align: center;
      vertical-align: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-color: transparent;
      border: 1px solid transparent;
      padding: .375rem .75rem;
      font-size: 1rem;
      line-height: 1.5;
      border-radius: .25rem;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }
  </code></pre>
  
  <p>What should I add in my css to keep the buttons to the side? Again it's to the side and it stays on the same position when I scroll down.</p>