title: Button won't work on my animation
body: <p>I made an animation some days ago using css3, it's basicaly a slideshow. The thing is that whenever I try to insert a button into the slideshow, the one on the first slide is not clickable, but the one on the second is.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class="slide1"&gt;
          &lt;div class="button_container1"&gt;
              &lt;div class="button_bg"&gt;&lt;/div&gt;
              &lt;button class="button_skin"&gt;En savoir plus&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="slide2"&gt;
          &lt;div class="button_container2"&gt;
              &lt;div class="button_bg"&gt;&lt;/div&gt;
              &lt;button class="button_skin"&gt;En savoir plus&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>.slide1{
      background: url(images/slide_1.jpg) no-repeat;
      width: 1050px;
      height: 425px;
      -webkit-animation: slide1 21s infinite;
      animation: slide1 21s infinite;
      position: relative;
      -webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
      -moz-box-shadow:    0px 0px 7px 0px rgba(50, 50, 50, 0.75);
      box-shadow:         0px 0px 7px 0px rgba(50, 50, 50, 0.75);
  }
  .button_container1{
    width: 87px;
    height: 23px;
    position: absolute;
    right: 22px;
    bottom: 69px;
  }
  @keyframes slide1 {
    0%   { opacity: 0;}
    2%  { opacity: 1; }
    33% { opacity: 1;}
    35% { opacity: 0;}
    100% {opacity: 0;}
  }
  .slide2{
      background: url(images/slide_2.jpg) no-repeat;
      width: 1050px;
      height: 425px;
      -webkit-animation: slide2 21s infinite;
      animation: slide2 21s infinite;
      position: relative;
      margin-top: -425px;
      -webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
      -moz-box-shadow:    0px 0px 7px 0px rgba(50, 50, 50, 0.75);
      box-shadow:         0px 0px 7px 0px rgba(50, 50, 50, 0.75);
  }
  .button_container2{
    width: 87px;
    height: 23px;
    position: absolute;
    left : 22px;
    bottom: 69px;
  }
  @keyframes slide2 {
    0%   { opacity: 0; }
    33%  { opacity: 0; }
    36% { opacity: 1;}
    66% { opacity: 1;}
    68% {opacity: 0;}
    100% {opacity: 0;}
  }
  </code></pre>
  
  <p>Thanks.</p>