Twelve dependency-free CSS micro-interactions for hover, focus, loading and success feedback with reduced-motion support.
Free for personal and commercial projects. No attribution required.
01
A short transform-based elevation that reinforces an interactive surface without moving surrounding layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hover Lift</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a class="dy-motion dy-lift" href="#details">View details</a>
</body>
</html>
02
Tactile active-state feedback using translation and shadow rather than layout properties.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Press Feedback</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="dy-motion dy-press" type="button">Save changes</button>
</body>
</html>
03
A controlled focus-compatible halo that preserves readable contrast and a visible keyboard outline.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Glow</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="dy-motion dy-glow" type="button">Create project</button>
</body>
</html>
04
A single pointer or focus-triggered decorative sweep with no continuous animation.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shine</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a class="dy-motion dy-shine" href="#upgrade">Explore plan</a>
</body>
</html>
05
A transform-based underline that appears for both pointer hover and keyboard focus.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Underline Reveal</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a class="dy-motion dy-underline" href="#guide">Read guide</a>
</body>
</html>
06
A stable inset border treatment that does not change the control dimensions.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Border Reveal</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="dy-motion dy-border" type="button">Add filter</button>
</body>
</html>
07
A decorative arrow shifts slightly while the text keeps the accessible name stable.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Icon Slide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a class="dy-motion dy-icon dy-slide" href="#continue">Continue <span aria-hidden="true">→</span></a>
</body>
</html>
08
A decorative plus rotates on hover or focus without changing the action label.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Icon Rotate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="dy-motion dy-icon dy-rotate" type="button"><span aria-hidden="true">+</span> Add item</button>
</body>
</html>
09
A completed-state treatment that communicates success with visible text as well as colour.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Success State</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="dy-motion dy-success" role="status"><span aria-hidden="true">✓</span> Changes saved</p>
</body>
</html>
10
An explicit disabled busy state with readable status text and reduced-motion fallback.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Loading State</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="dy-motion dy-loading" type="button" disabled aria-busy="true"><span class="dy-spinner" aria-hidden="true"></span> Saving…</button>
</body>
</html>
11
A finite skeleton treatment that marks decorative loading shapes as hidden from assistive technology.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Skeleton Pulse</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="dy-skeleton" aria-hidden="true"><span></span><span></span><span></span></div>
</body>
</html>
12
A strong keyboard focus treatment that remains distinct from the pointer hover state.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Focus Emphasis</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="dy-motion dy-focus" type="button">Open settings</button>
</body>
</html>
Implementation
Use motion to reinforce an action, not decorate every control. Connect loading and success examples to genuine application state.
FAQ
The pack provides 6 focused frontend formats. Choose one format before copying or downloading so the archive stays small.
No runtime package is required. Tailwind-labelled downloads expect Tailwind CSS to already be configured in the receiving project.
Yes. Each pattern has its own ZIP, and the page also creates a complete pack ZIP for the selected format.