Codepen — Flipbook

button:active transform: translateY(3px); box-shadow: 0 2px 0 #1a2a1d;

<!-- Book container --> <div id="flipbook"> <!-- Front Cover --> <div class="hard cover"> <h1>My Digital Magazine</h1> </div> <div class="hard"></div> <!-- Pages with Content --> <div><img src="https://via.placeholder.com/400x300" alt="Page 1"></div> <div><p>This is the second page of my awesome flipbook. Lorem ipsum dolor sit amet.</p></div> <div><p>Page three is full of interactive elements.</p></div> flipbook codepen

If you're looking for a solid starting point for a flipbook on CodePen, 1. The Cleanest Modern Version (CSS Variables) button:active transform: translateY(3px)