Lightweight HTML & CSS component snippets

Outer glow button CSS animation

Text typing animation without JavaScript (only CSS)

This is a text typing effect that happens entirely through HTML and CSS.

CSS loading spinner

Custom CSS ordered list number circle style

  1. First list item
  2. Second list item
  3. Third list item
  4. Fourth list item

Making each HTML line have different background color automatically

This paragraph will have each of its lines with a different background color. This is a pure CSS solution with no JavaScript at all!

Card with a lazy-loaded background image

Card with a Lazy-loaded Background Image and a Title

Button with inner shine animation

Checkmark icon on list items

  • Text with checkmark icon
  • Text with checkmark icon
  • Text with blocked icon
  • Regular text