15 HTML data-* Attributes Best Practices
Discover how data-* attributes transform plain HTML into a powerful tool for dynamic style and behavior control. This collection showcases best practices: from using data-state for CSS-driven styling of interactive components (like tabs or accordions) to passing configuration parameters directly into JavaScript modules. This approach allows you to separate presentation logic from your JS code, making the markup semantically richer and significantly simplifying component maintenance and customization.
Last updated:
Button Group with Animated Indicator
A simple button group where the indicator’s position is calculated in JS based on the button’s data-num attribute - the offset is set via style.marginLeft, while the active state is animated using CSS.
Neumorphic Multi-Buttons with GSAP Tooltip
Interactive buttons with dual animation - GSAP handles the tooltip appearance, while a CSS class change on click triggers the SVG checkmark animation via stroke-dashoffset.
Pricing Table with CSS Transforms
An elegant pricing switcher in pure JS that changes prices by fetching them from data-* attributes - plus a bundle of slick CSS animations using transform.
Accessible Password Input with Custom Web Components
Discover how to build a robust and accessible password input using only Vanilla JS to create Custom Elements and validate rules via RegExp, visualizing progress with data-score attributes and CSS Custom Properties.
Cosmic Neon Text Effect
A spectacular, interactive heading design: on hover, the text stroke disappears, giving way to a powerful, multi-colored neon glow. It’s a perfect demonstration of pure CSS capabilities for creating complex typography and “wow” effects.
CSS Grouped Area Chart
A component that transforms a standard HTML data table into a visually clear area chart while preserving the semantic data structure for accessibility and SEO.
CSS Grouped Bar Chart
The data table transforms into a visual bar chart, allowing for easy comparison of sales by channel (In-store, Online, Mobile) across months.
Hover Effects
A dynamic hover effect in pure CSS, where the :has() pseudo-class triggers simultaneous animations: a slide-out tooltip and a smooth icon fill. The tooltip’s content is sourced from a data-tooltip attribute via attr(), and the fill color is flexibly configured with a --bg CSS Custom Property.
Responsive Sidebar
A flexible and customizable sidebar built with CSS Custom Properties - sizes, spacing, and colors are easily configurable. The complex choreography of element appearance is achieved through transition-delay, and tooltip content is sourced from data-* attributes.
Buttons: Bootstrap 5 and vanilla-tilt.js
A visual presentation of how a basic component can be modified from a simple clickable element to a complex interactive object with a 3D parallax hover effect.
Calendar Mockup
A vibrant, poster-style calendar design that resembles printed material, featuring automatic display of event labels directly within the grid cells.
Hop Over Notification Badge
A “jumping” notification badge animation where content is dynamically sourced from a data-bubble attribute via attr(). The effect is implemented on an ::after pseudo-element using @keyframes that synchronously animate transform and z-index to create an illusion of depth.
Hover Effect #2
A performant text-swapping effect on hover, built on a synchronized animation - the original <span> is displaced by a ::after pseudo-element. The replacement content is sourced from a data-replace attribute via attr(), while smoothness and performance are ensured by transform: translate3d and a custom cubic-bezier function.
Movie Card
A visually rich card where a skewed background is created using transform: skewY on a pseudo-element. It showcases pure CSS solutions for interactive elements: a ‘star’ rating system based on hidden radio inputs, and custom tooltips that pull content from data-* attributes. The two-column layout is built using classic float.
3D Flip Card
A practical approach where a spectacular 3D flip is implemented in pure CSS, complemented by a small jQuery script for dynamically substituting background images from data-image attributes.