Skip to content

Buttons

Buttons and action triggers.

13 component(s)

Split Button Dropdown – Bootstrap 5 button groups preview

Split Button Dropdown

Bootstrap 5 split buttons: a primary deploy action whose target is chosen from an attached dropdown, plus compact save and export split buttons.

Bootstrap 5 Button Groups
Social Share Buttons – Pure CSS social buttons preview

Social Share Buttons

Pure CSS social share card with brand-colored X, Facebook and LinkedIn buttons, a copy-link field with clipboard feedback and a native share fallback.

Pure CSS Social Buttons
Floating Action Button Speed Dial – Pure CSS floating action buttons preview

Floating Action Button Speed Dial

Pure CSS floating action button that expands into a staggered speed dial of labeled actions, with vertical and horizontal variants and keyboard support.

Pure CSS Floating Action Buttons
Icon Buttons with Ripple – Pure CSS icon buttons preview

Icon Buttons with Ripple

Round icon buttons with a Material-style ripple, toggle states and tooltips: standard, filled, tonal and outlined variants in three sizes.

Pure CSS Icon Buttons
Animated Hover Buttons – Pure CSS button styles preview

Animated Hover Buttons

Eight pure CSS hover buttons with fill, diagonal, sliding text, border drawing, arrow, underline and press effects that also run on focus.

Pure CSS Button Styles
Gradient Buttons – Pure CSS button styles preview

Gradient Buttons

Pure CSS gradient buttons with shifting colors on hover, a gradient outline, glow and shine effects, sizes and a disabled state.

Pure CSS Button Styles
Floating Chat Button – Bootstrap 5 floating action buttons preview

Floating Chat Button

Bootstrap 5 floating chat button fixed to the bottom-right corner that opens a support chat panel with quick replies, typing indicator and unread badge.

Bootstrap 5 Floating Action Buttons
Editor Button Toolbar – Bootstrap 5 button groups preview

Editor Button Toolbar

Dark Bootstrap 5 text editor toolbar with grouped icon buttons, toggle states, a block style dropdown, arrow key navigation and a working editable area.

Bootstrap 5 Button Groups
Buttons with Loading State – Bootstrap 5 button styles preview

Buttons with Loading State

Bootstrap 5 buttons that show a spinner, block repeat clicks while working and then display a success or error state, in solid, outline, pill and icon styles.

Bootstrap 5 Button Styles
Social Login Buttons – Tailwind CSS social buttons preview

Social Login Buttons

Dark Tailwind CSS social login buttons for Google, Apple and GitHub with full-width and icon-only variants and a loading spinner state.

Tailwind CSS Social Buttons
Icon Buttons with Tooltips – Tailwind CSS icon buttons preview

Icon Buttons with Tooltips

Accessible Tailwind CSS icon buttons with tooltips as labels, toggle states, a keyboard-friendly toolbar, a navigation rail and Escape to dismiss.

Tailwind CSS Icon Buttons
Segmented Control – Tailwind CSS button groups preview

Segmented Control

Tailwind CSS segmented control with a sliding thumb, built on native radio inputs for single-choice view, range and billing toggles.

Tailwind CSS Button Groups
Button Variants – Tailwind CSS button styles preview

Button Variants

Tailwind CSS button set with primary, secondary, outline, ghost, danger and link variants, five sizes, icon buttons, loading and disabled states.

Tailwind CSS Button Styles

What are button components?

Buttons are the controls users click or tap to perform an action: submit a form, open a dialog, add an item to the cart, start a download. This category collects button styles and patterns, including solid, outline and ghost buttons, icon buttons, button groups, split and dropdown buttons, loading buttons, social login buttons and floating action buttons.

Buttons vs links

Use a <button> when the control does something on the current page and an <a href> when it takes the user somewhere else. Styling a link to look like a button is fine, but the underlying element should match its behaviour, because screen readers and keyboards treat them differently: buttons activate with Enter and Space, links only with Enter.

Button design and accessibility tips

  • Make the primary action visually dominant and keep one primary button per view or section.
  • Use clear verb labels such as "Save changes" or "Create account" rather than "Click here".
  • Icon-only buttons need an accessible name via aria-label or visually hidden text.
  • Keep a minimum touch target of around 44 by 44 pixels on mobile.
  • Never remove the focus outline without replacing it with a visible :focus-visible style.
  • Check contrast for text and borders in every state: default, hover, active, focus and disabled.
  • For loading states, disable repeated clicks and announce progress, for example with aria-busy or a status message.

Set type="button" on buttons inside forms that should not submit, which prevents surprising form submissions.

Framework versions

Button snippets are available for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. The Bootstrap 6 alpha examples use theme-* colour roles, which makes it easy to recolour a button set to match your brand, while Bootstrap 5 examples use the standard btn and btn-* variants. Pure CSS buttons are handy for adding hover and press effects without any framework. Preview the states live, filter by framework, then copy the HTML and CSS or download the snippet and adjust the colours and sizes.