Skip to main content

  • Foundations
    • Border radius
    • Breakpoints
    • Colours
    • Colour scheme
    • Elevation
    • Focus and outline
    • Sizing and spacing
    • Layout
    • Motion
    • Typography
    • Z-index
  • Elements
    • Buttons
    • Code
    • Icons
    • Figure and caption
    • Forms
    • Links
    • Lists
    • Media
    • Tables
  • Components
    • Accordion
    • Alerts
    • Avatar
    • Blockquote
    • Breadcrumbs
    • Card
    • Chiplets
    • Details and summary
    • Dialog
    • Empty state
    • Stats
    • Global footer
    • Horizontal rule
    • Kanban
    • Key-value list
    • Meter
    • Objects
    • Pagination
    • Polka background
    • Post-it note
    • Progress
    • Speech bubbles
    • Status dot
    • Skeleton
    • Skip link
    • Spinner
    • Toggles
    • Tooltip
    • Webmentions
  • Patterns
    • Article header
    • Author card
    • App list and app sheet
    • Error page
    • Related posts
    • Search results
    • Utilities

John Peart

  • Search
  • Menu
John Peart

Buttons

Native buttons and links styled as buttons.

The .button class gives the same treatment as a native <button> element, so it can be applied to links or any clickable element. Native <button> elements are styled the same way without the class.

Native button

<button type="button">Button</button>

Link styled as a button

Link button
<a href="#" class="button">Link button</a>

Disabled

<button type="button" disabled>Disabled</button>
A line drawing of John Peart

John Peart

www.johnpe.art

Mastodon logo

Mastodon

BlueSky logo

Bluesky

LinkedIn logo

LinkedIn

Github logo

GitHub