Twelve purposeful button animations with accessible semantics, visible focus and reduced-motion support. Available in popular frontend formats—without a runtime animation dependency.
01
Rises slightly on hover and settles under pointer or keyboard activation.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lift Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button type="button" class="ui-button ui-button--lift"><span>Explore tools</span></button>
</body>
</html>
02
Adds a controlled blue halo without reducing text contrast.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Glow Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button type="button" class="ui-button ui-button--glow"><span>Create project</span></button>
</body>
</html>
03
Moves a compact gradient across the surface using background position.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gradient Shift Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button type="button" class="ui-button ui-button--gradient"><span>Start building</span></button>
</body>
</html>
04
Reveals an inset accent border while keeping the button dimensions stable.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Border Reveal Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button type="button" class="ui-button ui-button--border"><span>View details</span></button>
</body>
</html>
05
Slides a decorative arrow into view without changing the accessible name.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Arrow Slide Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button type="button" class="ui-button ui-button--arrow"><span class="ui-button__icon" aria-hidden="true">→</span><span>Read guide</span></button>
</body>
</html>
06
Moves a decorative plus icon into a clear create action.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Icon Slide Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button type="button" class="ui-button ui-button--icon"><span class="ui-button__icon" aria-hidden="true">+</span><span>Add component</span></button>
</body>
</html>
07
Uses shadow and translation to provide tactile press feedback.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Press Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button type="button" class="ui-button ui-button--press"><span>Save changes</span></button>
</body>
</html>
08
Runs a single restrained highlight sweep on hover or focus.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shine Sweep Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button type="button" class="ui-button ui-button--shine"><span>Upgrade layout</span></button>
</body>
</html>
09
Shows an explicit busy state with visible status text and disabled activation.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Loading Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button type="button" class="ui-button ui-button--loading" aria-busy="true" disabled><span class="ui-button__icon" aria-hidden="true"></span><span>Saving…</span></button>
</body>
</html>
10
Confirms a completed action with text and an icon instead of colour alone.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Success State Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button type="button" class="ui-button ui-button--success"><span role="status"><span class="ui-button__icon" aria-hidden="true">✓</span><span>Saved</span></span></button>
</body>
</html>
11
Signals a destructive action with explicit wording and measured feedback.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Destructive Action Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button type="button" class="ui-button ui-button--destructive"><span>Delete project</span></button>
</body>
</html>
12
Uses a finite, low-amplitude pulse to draw attention without constant motion.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Attention Pulse Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button type="button" class="ui-button ui-button--pulse"><span>Review changes</span></button>
</body>
</html>
Implementation
These patterns favour transform and opacity, retain native button keyboard behaviour and keep their accessible names stable. Loading and success examples demonstrate state markup; connect them to your application’s real state.
FAQ
No. The interactions use CSS, with framework components providing portable markup and event hooks.
Yes. Each implementation removes non-essential animation and transitions when prefers-reduced-motion is enabled.
Yes. Choose a format, then download one pattern or the complete pack in that format.