index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D Button Flip</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gridWrapper">

  <header>
    <h2>3D Button Flip</h2>
    <div class="misc">
      <a href="https://github.com/rpsthecoder/3d-button-flip" target="_blank">Github Repo</a> | 
      Icons by <a href="https://thenounproject.com/diogotrindade/" target="_blank" title="&#x1F310; https://thenounproject.com/diogotrindade/">Diogo Trindade</a> <br>
      &#x1F504; <a href="javascript:location.reload(true)" title="&#x1F446; Click to reload the page">Reload/Refresh</a>
    </div>
  </header>
  
  <div class="flipBtnWrapper">
    <p>#1 Top to Bottom Flip</p>
    <input class="flipBtn_checkbox" type="checkbox"/>
    <div class="flipBtn demo1">
      <div class="flipBtn_face flipBtn_back demo1"></div>
      <div class="flipBtn_face flipBtn_mid demo1"></div>
      <div class="flipBtn_face flipBtn_front demo1"></div>
    </div>
  </div>

  <div class="flipBtnWrapper">
    <p>#2 Bottom to Top Flip</p>
    <input class="flipBtn_checkbox" type="checkbox"/>
    <div class="flipBtn demo2">
      <div class="flipBtn_face flipBtn_back demo2"></div>
      <div class="flipBtn_face flipBtn_mid demo2"></div>
      <div class="flipBtn_face flipBtn_front demo2"></div>
    </div>
  </div>

  <div class="flipBtnWrapper">
    <p>#3 Right to Left Flip</p>
    <input class="flipBtn_checkbox" type="checkbox"/>
    <div class="flipBtn demo3">
      <div class="flipBtn_face flipBtn_back demo3"></div>
      <div class="flipBtn_face flipBtn_mid demo3"></div>
      <div class="flipBtn_face flipBtn_front demo3"></div>
    </div>
  </div>

  <div class="flipBtnWrapper">
    <p>#4 Left to Right Flip</p>
    <input class="flipBtn_checkbox" type="checkbox"/>
    <div class="flipBtn demo4">
      <div class="flipBtn_face flipBtn_back demo4"></div>
      <div class="flipBtn_face flipBtn_mid demo4"></div>
      <div class="flipBtn_face flipBtn_front demo4"></div>
    </div>
  </div>
  
</div>
</body>
</html>