Copy with intent. Each example is a standalone HTML/CSS study. Check its use case, integration and accessibility notes before dropping it into a real stateful flow.
Find an example Pause animation
8 examples
Get started
Gradient Pill 01
A friendly primary action for onboarding or a clear start step.
Inspect and copy source
Dependencies None; HTML and CSS only.
Integration Wire the action to a real button handler or form action, and provide a success or error result after it runs.
Keyboard The native button is keyboard reachable. Keep its label specific and preserve visible focus.
Status This snippet has no built-in success or error state; expose the result in the surrounding interface.
Reduced motion Add a prefers-reduced-motion rule if you keep hover or transition motion in a busy workflow.
Scope The preview scopes the shared .component class per card. Scope or rename it before combining examples on one page. Format for Gradient PillHTML + CSS HTML CSS <button type="button" class="component">Get started</button>
<style>
.component {
display: inline-flex;
align-items: center;
padding: 10px 24px;
border-radius: 99px;
border: none;
cursor: pointer;
font-size: 13px;
font-weight: 500;
font-family: inherit;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
transition: opacity 0.2s ease, transform 0.15s ease;
}
.component:hover {
opacity: 0.85;
transform: translateY(-1px);
}
.component:active { transform: translateY(0); }
</style>Copy HTML + CSS
Read more
Ghost 02
A low emphasis secondary action beside a stronger primary choice.
Inspect and copy source
Dependencies None; HTML and CSS only.
Integration Wire the action to a real button handler or form action, and provide a success or error result after it runs.
Keyboard The native button is keyboard reachable. Keep its label specific and preserve visible focus.
Status This snippet has no built-in success or error state; expose the result in the surrounding interface.
Reduced motion Add a prefers-reduced-motion rule if you keep hover or transition motion in a busy workflow.
Scope The preview scopes the shared .component class per card. Scope or rename it before combining examples on one page. Format for GhostHTML + CSS HTML CSS <button type="button" class="component">Read more</button>
<style>
.component {
display: inline-flex;
align-items: center;
padding: 10px 22px;
border-radius: 6px;
background: transparent;
border: 1.5px solid #111;
color: #111;
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}
.component:hover {
background: #111;
color: #fff;
}
</style>Copy HTML + CSS
Launch
Glow 03
A dark call to action where contrast should carry the interaction.
Inspect and copy source
Dependencies None; HTML and CSS only.
Integration Wire the action to a real button handler or form action, and provide a success or error result after it runs.
Keyboard The native button is keyboard reachable. Keep its label specific and preserve visible focus.
Status This snippet has no built-in success or error state; expose the result in the surrounding interface.
Reduced motion Add a prefers-reduced-motion rule if you keep hover or transition motion in a busy workflow.
Scope The preview scopes the shared .component class per card. Scope or rename it before combining examples on one page. Format for GlowHTML + CSS HTML CSS <button type="button" class="component">Launch</button>
<style>
.component {
display: inline-flex;
align-items: center;
padding: 10px 22px;
border-radius: 6px;
border: none;
background: #111;
color: #fff;
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: box-shadow 0.25s ease, transform 0.15s ease;
}
.component:hover {
box-shadow: 0 0 0 1px #111, 0 4px 20px rgba(17,17,17,0.45), 0 8px 40px rgba(17,17,17,0.15);
transform: translateY(-1px);
}
.component:active { transform: translateY(0); }
</style>Copy HTML + CSS
Explore
Shimmer 04
A dark action with a hover shimmer for exploratory navigation.
Inspect and copy source
Dependencies None; HTML and CSS only.
Integration Wire the action to a real button handler or form action, and provide a success or error result after it runs.
Keyboard The native button is keyboard reachable. Keep its label specific and preserve visible focus.
Status This snippet has no built-in success or error state; expose the result in the surrounding interface.
Reduced motion Add a prefers-reduced-motion rule if you keep hover or transition motion in a busy workflow.
Scope The preview scopes the shared .component class per card. Scope or rename it before combining examples on one page. Format for ShimmerHTML + CSS HTML CSS <button type="button" class="component">Explore</button>
<style>
.component {
display: inline-flex;
align-items: center;
padding: 10px 22px;
border-radius: 6px;
border: none;
background: linear-gradient(110deg, #111 30%, #444 50%, #111 70%);
background-size: 250% 100%;
background-position: 0% center;
color: #fff;
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: background-position 0.6s ease;
}
.component:hover {
background-position: 100% center;
}
</style>Copy HTML + CSS
View docs
Lift 05
A quiet document or navigation action with a small lift on hover.
Inspect and copy source
Dependencies None; HTML and CSS only.
Integration Wire the action to a real button handler or form action, and provide a success or error result after it runs.
Keyboard The native button is keyboard reachable. Keep its label specific and preserve visible focus.
Status This snippet has no built-in success or error state; expose the result in the surrounding interface.
Reduced motion Add a prefers-reduced-motion rule if you keep hover or transition motion in a busy workflow.
Scope The preview scopes the shared .component class per card. Scope or rename it before combining examples on one page. Format for LiftHTML + CSS HTML CSS <button type="button" class="component">View docs</button>
<style>
.component {
display: inline-flex;
align-items: center;
padding: 10px 22px;
border-radius: 6px;
border: 1px solid rgba(0,0,0,0.1);
background: #fff;
color: #111;
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.component:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06);
transform: translateY(-2px);
}
.component:active { transform: translateY(0); }
</style>Copy HTML + CSS
Continue →
Arrow Slide 06
A text-forward continuation link where the arrow confirms direction.
Inspect and copy source
Dependencies None; HTML and CSS only.
Integration Wire the action to a real button handler or form action, and provide a success or error result after it runs.
Keyboard The native button is keyboard reachable. Keep its label specific and preserve visible focus.
Status This snippet has no built-in success or error state; expose the result in the surrounding interface.
Reduced motion Add a prefers-reduced-motion rule if you keep hover or transition motion in a busy workflow.
Scope The preview scopes the shared .component class per card. Scope or rename it before combining examples on one page. Format for Arrow SlideHTML + CSS HTML CSS <button type="button" class="component"><span class="component-text">Continue</span><span class="component-arrow">→</span></button>
<style>
.component {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 6px;
border: none;
background: transparent;
color: #111;
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
}
.component-arrow {
display: inline-block;
transition: transform 0.2s ease;
}
.component:hover .component-arrow {
transform: translateX(4px);
}
</style>Copy HTML + CSS
Connect
Neon 07
An accent action for a connection or invitation step on a quiet surface.
Inspect and copy source
Dependencies None; HTML and CSS only.
Integration Wire the action to a real button handler or form action, and provide a success or error result after it runs.
Keyboard The native button is keyboard reachable. Keep its label specific and preserve visible focus.
Status This snippet has no built-in success or error state; expose the result in the surrounding interface.
Reduced motion Add a prefers-reduced-motion rule if you keep hover or transition motion in a busy workflow.
Scope The preview scopes the shared .component class per card. Scope or rename it before combining examples on one page. Format for NeonHTML + CSS HTML CSS <button type="button" class="component">Connect</button>
<style>
.component {
display: inline-flex;
align-items: center;
padding: 10px 22px;
border-radius: 6px;
border: 1.5px solid #6366f1;
background: transparent;
color: #6366f1;
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: box-shadow 0.25s ease, background 0.2s ease;
}
.component:hover {
background: rgba(99,102,241,0.06);
box-shadow: 0 0 14px rgba(99,102,241,0.35), 0 0 28px rgba(99,102,241,0.12);
}
</style>Copy HTML + CSS
Sign up free
Gradient Border 08
A colorful sign-up action with emphasis carried by its gradient edge.
Inspect and copy source
Dependencies None; HTML and CSS only.
Integration Wire the action to a real button handler or form action, and provide a success or error result after it runs.
Keyboard The native button is keyboard reachable. Keep its label specific and preserve visible focus.
Status This snippet has no built-in success or error state; expose the result in the surrounding interface.
Reduced motion Add a prefers-reduced-motion rule if you keep hover or transition motion in a busy workflow.
Scope The preview scopes the shared .component class per card. Scope or rename it before combining examples on one page. Format for Gradient BorderHTML + CSS HTML CSS <button type="button" class="component"><span class="component-inner">Sign up free</span></button>
<style>
.component {
display: inline-flex;
align-items: center;
padding: 1.5px;
border-radius: 8px;
border: none;
background: linear-gradient(135deg, #f43f5e, #8b5cf6, #06b6d4);
cursor: pointer;
}
.component-inner {
display: inline-flex;
align-items: center;
padding: 8.5px 21px;
border-radius: 6.5px;
background: #fff;
color: #111;
font-size: 13px;
font-weight: 500;
font-family: inherit;
transition: background 0.2s ease;
}
.component:hover .component-inner {
background: rgba(255,255,255,0.88);
}
</style>Copy HTML + CSS