Pure CSS guides

Short, practical tutorials for building common interface pieces with only HTML and CSS. Each guide has live demos you can try and code you can copy.

• How to Make a Pure CSS Loader (Spinner, Dots and Progress Bar)

  Learn how to build three pure CSS loaders: a spinning ring, bouncing dots and a progress bar. Live demos and copy-ready HTML and CSS, no JavaScript.

  Read the guide →

• CSS Button Hover Effects: 4 Pure CSS Examples You Can Copy

  Four pure CSS button hover effects with live demos and code: lift with shadow, sliding fill, glow and gradient shift. No JavaScript or libraries.

  Read the guide →

• How to Build a Dropdown Menu with Pure CSS (No JavaScript)

  Build a dropdown menu with only HTML and CSS: a hover and keyboard version using :focus-within, and a click version using a checkbox. Live demos and code.

  Read the guide →

• How to Make a 3D Flip Card in Pure CSS

  Make a 3D flip card with only HTML and CSS using perspective and backface-visibility. Includes a keyboard-friendly version. Live demo and copy-ready code.

  Read the guide →

• CSS Accordion Without JavaScript: Using details and summary

  Build an accordion with only HTML and CSS using the details and summary elements. Includes an animated plus icon and one-open-at-a-time groups. Live demos.

  Read the guide →

• How to Make a CSS-Only Slider with Scroll Snap

  Build a swipeable slider with no JavaScript using CSS scroll snap. A short live demo with copy-ready HTML and CSS for images or any content.

  Read the guide →