How to use button hyperlinks using Flexslider?

Question

I want to use my flexslider to navigate through my pages. it will not let me click on the buttons on top of the slider. slider:

button,
h3 {
  position: absolute;
  z-index: 2;
}

.slides button {
  bottom: 0;
  margin: 20px;
  padding: 15px;
  border-radius: 5px;
  cursor: pointer;
  background-color: #1C934E;
}

.slides button:hover {
  background-color: #146D3A;
}

.slides button a {
  text-decoration: none;
  color: #FBEDED;
}

.slides button a:hover {
  color: #C5BBBB;
}

<header>
  <div class="flexslider">
    <ul class="slides">
      <li>
        <button type="button"><a href="#">Learn more about the Cheetah!</button>
        <img src="img/cheetahslide.jpg" alt="Cheetah walk around savannah"></a>
        <p class="flex-caption"></p>
      </li>
      <li>
        <button type="button"><a href="#">Learn more about the Elephant!</a></button>
        <img src="img/elephantslide.jpg" alt="elephant walking in field">
     </li>
      <li>
        <button type="button"><a href="#">Learn more about the Komodo Dragon!</a></button>
        <img src="img/komodoslide.jpg" alt="komodo dragon on a rock">
      </li>
    </ul>
  </div>
</header>

I'm not sure if it is just a flexslider thing or not. Whenever I use the inspector, it doesn't even show the button.

I tried changing the position of the button and tried different locations.

Answer 1

Check .flexslider and .slides classes has position relative.

.flexslider,
.slides {
    position: relative;
}