Collection of free HTML and CSS book effect code examples (3d, animation, flip, layout, etc) from Codepen, Github and other resources. Update of June 2021 collection. 9 new items.
Related Articles
Links
Made with
- HTML / CSS
About a code
Text Book
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
3D Book
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Book Preview
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Mrs. Dalloway Aged Paper Reader - Responsive
Auto overflow reader with aged paper styling.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Book Preloader
A looping 3D-ish book animation that could act as a preloader.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
3D Ebook Flip Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Turning Pages with CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (Stylus)
About a code
CSS Coffee Table Book Effect
Add a containing div
to turn an image into coffee table book.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS Books
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Single DIV Book
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS-Only Foundation Book Preview
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Book Design
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
3D Book
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
Pure CSS Magazine Style Layout with Transitions
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About the code
George Orwell 1984 Book Cover
George Orwell 1984 book cover with hover effect in HTML, SVG and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Shiny Book Reveal
3D hover effect to open a book and reveal the synoposis of the book.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Flipping Book
CSS only flipping book.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Books Hover Animation
Pure CSS book hover animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -


Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
Book Group UI
Book group UI with HTML, CSS and JS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js


Links
Made with
- HTML / CSS
About the code
Book Animation
HTML & CSS book animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS
About the code
3D Book
This book was created using HTML and CSS only. It has some CSS animations on mouse-hover.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS
About the code
Book Flip Hover Effect
3D flip hover effects, book of congratulations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About the code
Comic Book Style Layout
Good comic book style layout with CSS Grid.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS
About the code
Book Layout
A responsive skeuomorph book layout, packed with fun little features.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
3D Book Browsing
A CSS-only demo that simulates picking books off a shelf and previewing a page (on hover) in first-person. It all works using label
s and offscreen radio input
s for each book, and a reset input
as a return button allows you to put everything back to its original position.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS
About the code
Book Opening Animation
Book opening animation in pure CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Spinning 3D Book Using Only CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About the code
Responsive Comic Book Layout
A responsive layout using flexbox
with narrative text and speech bubbles styled in CSS. Background patterns also in CSS. The only acceptable use of Comic Sans font.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (less) / JavaScript
About the code
Book Flip
CSS book flip with little jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js


Links
Made with
- HTML / CSS (SCSS)
About the code
Jumpy Book Shelf
This animation is purely an easter egg. We try and put in a little unexpected fun wherever we can when designing our products. This was part of the Helix Cup web app we just launched where one of the experience tenants was simply: ‘fun’. The books were used on a downloadable resource panel, but if you happen to move your mouse over them, they will jump!
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML (Haml) / CSS
About a code
CSS 3D Bending Effect - Page Flip
CSS only experiment. Page flip with bending effect. Works only on browsers that support transform-style: preserve-3d
.
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML (Haml) / CSS (SCSS)
About the code
Pure CSS Animal Book
Move mouse cursor from left to right/ right to left.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS / JavaScript
About the code
Animated Books with CSS 3D Transforms
A creative way to show interactive books using CSS 3D transform
s.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS / JavaScript
About the code
3D Book Showcase
An experiment about a realistic looking book showcase with some interactivity using CSS 3D transform
s.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Haml) / CSS
About a code
Handbook CSS3
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -