Click any button to copy compact, standalone HTML that is easy to reuse.
In the “Recently Copied HTML” section below, you can copy only the CSS or element markup you need.
The copied code recreates the button’s default appearance as
<button style="...">Label</button>
It does not depend on CSS classes or external stylesheets.
Dark Buttons
Deep-color variations with a strong visual presence.
Soft Dark Buttons
Softer than the darkest styles, ideal for standing out without feeling overpowering.
Core Actions — Standard Set
A light blue set for essential actions such as save, load, and confirm.
Core Editing Actions
Calm, standard actions that fit naturally into editing screens.
Primary Actions
Designed for prominent actions such as applying, sending, and confirming.
Gentle Buttons
For guidance, secondary actions, and previews that should feel approachable.
Warnings and Destructive Actions
For destructive or cautionary actions such as delete, remove, and stop.
Success and Completion
For positive state changes such as completion, approval, and applying updates.
Lightweight Outline Buttons
Best for secondary actions and controls that behave like supporting links.
Glass Buttons
Semi-transparent buttons with a subtle futuristic feel.
Pill Buttons
A rounded shape that works well for tags, choices, and friendly interfaces.
Large Buttons
A useful size for mobile screens and landing-page calls to action.
Compact Buttons
Ideal for compact actions inside tables and cards.
Dark-Tone Buttons
Well suited to admin panels and interfaces that need a more substantial feel.
Full-Width Buttons
Designed for form submission areas and full-width mobile actions.
Warm-Tone Buttons
Easy to match with pages that need warmth and approachability.
Sharper-Corner Buttons
A slightly sharper shape for a neat, structured appearance.
Elevated Shadow Buttons
The stronger shadow makes the buttons feel clearly clickable.
Flat Buttons
A shadow-free style for minimal, lightweight interfaces.
Classic Actions
Versatile core buttons that are easy to use as a starting point.
Caution and Revision
For actions such as deletion and sending content back for revision.
Documents and Distribution
Examples for creating, distributing, and exporting documents.
Admin Interface
Administrative buttons with a calm, substantial appearance.
Notifications and Progress
A practical set for confirmations, guidance, and progression.
Modern Dark Tones
Designed to pair naturally with dark-themed interfaces.
Booking and Consultation
Guidance buttons that balance softness with clear clickability.
Calm Business Actions
A restrained palette that fits internal tools and business applications.
Soft Secondary Actions
Useful secondary actions that do not compete with the main flow.
Signup and Onboarding
An additional set for service onboarding and information-request flows.
Friendly Calls to Action
For interfaces that should feel friendly, light, and approachable.
Gold and Premium
Adds a subtle sense of premium value and exclusivity.
Subtle Office Actions
Subtle enough to blend naturally into business interfaces.
Modern Gray and Purple
A modern-looking set that still works well in admin screens.
Information and Review
Useful for reports, announcements, and data-review workflows.
List and Organization Actions
Secondary controls for organizing, sorting, and reviewing lists.
Cautionary Secondary Actions
A lighter warning style for actions that need caution but are not destructive.
Refined Secondary Actions
Refined options for guidance and confirmation actions.
Core Actions — Stronger Emphasis
For core actions that need slightly more emphasis than usual.
Edit and Update — Mixed Emphasis
A balanced combination that naturally separates primary and secondary actions.
Review Flow — Staged Emphasis
Useful when color depth should communicate levels of importance.
List Actions — Natural Hierarchy
A list-oriented set where only the primary action receives stronger emphasis.
Light Emphasis with Warm Tones
Warm accents for actions that should attract a little extra attention.
Calm and Functional
A practical set with an overall soft tone and a slightly stronger primary button.
Experimental Gradients
Unconventional styles that work well as playful accents.
Patterned Buttons
Buttons with unusual textures such as stripes and metallic finishes.
Colorful and Neon
Bold designs that work especially well on landing pages and playful interfaces.
Experimental Gradients — Set 2
A showcase set that adds playful details to soft color bases.
Bold Two-Color Gradients
Useful when you want more emphasis without going as far as neon.
Mint and Soda Tones
Cool, airy colors that communicate freshness and lightness.
Rose and Peach Tones
A playful option for adding a soft and elegant touch.
Metal and Glass
Useful for adding a subtle futuristic or tactile quality.
Highlighted Gradients
Experimental gradients with a highlight that appears to come from the upper left.
Experimental Dark Tones
Calm, dark experimental styles that work well near the end of a showcase.
Playful Color Mix
A mixed set that demonstrates the breadth of available variations.
Icon Buttons — Basics
Practical variations that combine buttons with directional and action icons.
Status Buttons
Designed for states such as success, error, and information.
Utility Buttons
Utility controls that fit naturally into settings and feature interfaces.
Icon Buttons — Set 2
Variations with right-side icons for add, subtract, reload, and search actions.
Practical Icon Buttons
A practical set for editing, file transfer, favorites, and similar tasks.
Administrative Controls
Administrative controls for permissions, deletion, folders, and list views.
UI Component Mix — Refreshed
A refreshed set designed to sit naturally beside fields, notifications, filters, and chips.
UI Component Mix — Form Actions
Component-style buttons for search, add, save, cancel, and other form actions.
UI Component Mix — List Actions
A practical set for list screens, card collections, and management tables.
UI Component Mix — Navigation
Useful navigation and supporting controls for back, next, notifications, and deletion.
UI Component Mix — Dark Accents
Dark component-style buttons that emphasize important actions and selected states.
UI Component Mix — Card Actions
Additional dashboard controls for cards, settings, email, and history.
UI Component Mix — Emphasized Actions
A dark mix for actions such as add, approve, export, and like that need extra emphasis.
UI Component Mix — Supporting Controls
Supporting controls for documents, projects, filtering, and directional navigation.
UI Component Mix — Additional Dark UI
Dark UI controls for selected states, pinned items, and important menus.
Additional Dark Buttons — Set A
A collection of substantial dark buttons for admin interfaces and strongly emphasized flows.
Additional Dark Buttons — Set B
An expanded dark-color collection for increasing the range of examples.
Soft Dark Button Collection
Softer than the darkest styles, ideal for standing out without feeling overpowering.
Bold Gradient Buttons — Set A
High-contrast styles for prominent calls to action.
Bold Gradient Buttons — Set B
Vivid gradients for landing pages and interfaces that need strong emphasis.
Playful Variations — Dark Set A
Darker, more substantial reinterpretations of the existing experimental styles.
Playful Variations — Dark Set B
A darker reconstruction of playful mint, rose, glass, and multicolor styles.
Glowing Buttons
Impact-focused buttons with stronger glow, shine, and neon effects.
Playful Variations — Light Set A
Lighter, more readable variations that retain the mood of the dark set.
Recently Copied HTML
The compact HTML for the last button you clicked also appears here.