title: Buttons not clickable inside div: believe it to be due to the svg background
body: <p>I have two buttons placed in a few layers of divs. Placing the buttons outside of the divs allows them to become clickable, but inside they are not. After some testing it seems to be the 'background' div that is preventing the clickable button, possibly due to an svg being used as the background behind the buttons? I have tried using z index with position:absolute with no luck. Also making the buttons <code>visibility:visible</code></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>    .background {
      background-image: url(images/background.svg);
      background-size: cover;
      width: 100%;
      height: 100vh;
      position: relative;
      top:-76px;
      z-index: -1;
  
  }
  
      .left-header {
      position: relative;
      top: 40vh;
      
  }
  
  
      .btn-primary {
      margin-top: 30px;
      text-transform: uppercase; 
      font-family: Roboto;
      font-weight: 500;
      font-size: 15px;
      margin-right: 20px;
      transition: all 0.3s ease 0s;
      outline: none;    
      border-radius: 4px;
      display: inline-block;
      letter-spacing: .025em;
      line-height: 25px;
      cursor: pointer !important;
      
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="background"&gt;
              &lt;div class="container left-header"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col"&gt;
                              &lt;h1&gt;hello.&lt;/h1&gt;
                              &lt;h2&gt;some text&lt;/h2&gt;
                              &lt;button type="button" href="#!" class="btn btn-primary shadow"  id="but1"&gt;Create Account&lt;/button&gt;
                              &lt;button type="button" class="btn btn-primary shadow" id="but2"&gt;Contact Us&lt;/button&gt;                  
                      &lt;/div&gt;
                      &lt;div class="col"&gt;
                          &lt;div class="illustration"&gt;&lt;img src="images/illustration.svg"&gt;&lt;/div&gt;        
                      &lt;/div&gt;
                  &lt;/div&gt;              
              &lt;/div&gt;      
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>.  </p>