title: Can buttons in a half-transparent div be full opacity?
body: <p>I want to have a semi-transparent fixed bar at the bottom of the screen, that has some buttons on it, but I would like the buttons to appear as full opacity.</p>
  
  <p>My problem is, that if I set the opacity of the bar, that obviously sets the buttons opacity (As they are children of the footer bar).</p>
  
  <p>How can I have the bar as semi-transparent, but the buttons to appear with full opacity, without changing much of the HTML markup?</p>
  
  <p><a href="https://jsfiddle.net/leecollingsco/2bmgg3Lr/" rel="nofollow">https://jsfiddle.net/leecollingsco/2bmgg3Lr/</a></p>
  
  <pre><code>&lt;div id="footerBar" class="hidden-xs"&gt;
      &lt;div class="container"&gt;
          &lt;div class="text-center"&gt;
              &lt;a href="/contact-us" class="btn btn-primary"&gt;&lt;span class="fa fa-phone"&gt;&lt;/span&gt; Call 01234 567890&lt;/a&gt;
              &lt;a href="/contact-us" class="btn btn-primary"&gt;&lt;span class="fa fa-mouse-pointer"&gt;&lt;/span&gt; Book a consultation&lt;/a&gt;
              &lt;a href="/events" class="btn btn-primary"&gt;&lt;span class="fa fa-calendar-o"&gt;&lt;/span&gt; Come to an open evening&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  #footerBar {
      position:fixed;
      bottom:5px;
      left:0;
      width:100%;
      padding:.75em 0;
      color:#fff;
      opacity:.5;
      background-color: #eee;
      box-shadow:0 0 1.5em rgba(0,0,0,0.5);
      z-index:999;
  }
  </code></pre>