CSS Interactivity Snippets

The CSS snippet collection contains utilities and interactive examples for CSS3. It includes modern techniques for creating commonly-used layouts, styling and animating elements, as well as snippets for handling user interactions.

  • Image gallery with vertical scroll

    Creates a horizontally scrollable image gallery.

    CSS, Visual · May 5, 2022

  • Image gallery with horizontal scroll

    Creates a horizontally scrollable image gallery.

    CSS, Visual · May 1, 2022

  • Mouse cursor gradient tracking

    A hover effect where the gradient follows the mouse cursor.

    CSS, Visual · Jan 7, 2021

  • Horizontal scroll snap

    Creates a horizontally scrollable container that will snap on elements when scrolling.

    CSS, Interactivity · Oct 11, 2021

  • Vertical scroll snap

    Creates a scrollable container that will snap on elements when scrolling.

    CSS, Interactivity · Aug 18, 2020

  • Input with prefix

    Creates an input with a visual, non-editable prefix.

    CSS, Interactivity · Oct 13, 2021

  • Focus Within

    Changes the appearance of a form if any of its children are focused.

    CSS, Visual · Dec 30, 2020

  • Hamburger Button

    Displays a hamburger menu which transitions to a cross button on hover.

    CSS, Interactivity · Dec 30, 2020

  • Popout menu

    Reveals an interactive popout menu on hover/focus.

    CSS, Interactivity · Dec 30, 2020

  • Toggle switch

    Creates a toggle switch with CSS only.

    CSS, Visual · Dec 30, 2020

  • Tip: Style links without a class

    A short summary of your story up to 180 characters long.

    CSS, Visual · Nov 23, 2022

  • Disable selection

    Makes the content unselectable.

    CSS, Interactivity · Dec 30, 2020

  • Tip: The perfect duration for CSS transitions

    Learn how to make your CSS transitions feel perfect when users interact with elements on the page with this simple tip.

    CSS, Interactivity · Jun 12, 2021

  • Sibling fade

    Fades out the siblings of a hovered item.

    CSS, Interactivity · Dec 30, 2020

  • Tip: Select any link with CSS

    You can use a CSS pseudo-class selector to style all links in a page, without worrying if they have been visited or not.

    CSS, Visual · Mar 6, 2022