title: CSS button not working in Google Chrome?
body: <p>I'm working on a home page for a film company's website, and it has a CSS button with a hover effect that is going to open a lightbox once it's ready, at the moment I just have it set to href="#" as a placeholder until I'm ready to implement the lightbox. There is also a small image of a downward pointing arrow, with the link set to an anchor that isn't on the page yet. Both of these work in Firefox, but in Chrome the hover effect doesn't work on the button, and it behaves as if neither of these elements have anchor tags around them. I poked around with Chrome's dev tools and it seems as though the span around the button may be the culprit as Chrome seems to be resizing it, but I can't figure out any reason why the image link isn't working, and I'm not entirely sure why Chrome is disagreeing with the span.</p>
  
  <p>The strange part is that there are three other CSS buttons with hover effects in a seperate div, and they all work just fine.</p>
  
  <p>The website is currently uploaded at <a href="http://www.gruntwork.us/reelindi/test/" rel="nofollow">http://www.gruntwork.us/reelindi/test/</a>
  The style sheet can be found at <a href="http://www.gruntwork.us/reelindi/test/reelindi.css" rel="nofollow">http://www.gruntwork.us/reelindi/test/reelindi.css</a></p>
  
  <p>CSS:</p>
  
  <pre><code>div.header {
      position:absolute;
      top: 0;
      left: 0;
      right: 0;
      background-image:url("resources/images/bg.jpg");
      background-size:cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      height:430px;
      width:100%;
      z-index: -1;
  }
  img.arrow {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: 58px;
      z-index: 999;
  }
  span.redBtn a {
      text-align:center;
      display:block;
      margin: 0 auto;
      width: 150px;
      margin-top: -40px;
      z-index: 999;
  }
  a.redBtn {
      color: #fff;
      background-color: #d94d4d;
      font-size: 1.125em;
      padding: 8px 18px;
      text-decoration: none;
      text-align: center;
      -webkit-transition: all ease 1s;
      -moz-transition: all ease 1s;
      -o-transition: all ease 1s;
      -ms-transition: all ease 1s;
      transition: all ease 1s;
      border-radius: 5px;
  }
  a.redBtn:hover {
      background-color: #bf3030;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="header"&gt;
      &lt;h1 class="header"&gt;Reel Indi&lt;/h1&gt;
      &lt;h2 class="header"&gt;"Storytelling in motion."&lt;/h2&gt;&lt;br&gt;
      &lt;span class="redBtn"&gt;&lt;a href="#" class="redBtn"&gt;Push the red button!&lt;/a&gt;&lt;/span&gt;
      &lt;a href="#footer"&gt;&lt;img class="arrow" src="resources/images/arrow.png"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've searched around but can't find an answer for this. Help?</p>