Simple CSS Button examples

Find the inspiration for your new button design. Click on an element to copy the CSS!

📌 PressCTRL + Dto bookmark this page.

The Buttton element

The Button is one of the most important design elements of your website. It will help to guide your visitors inside your application. That's why your button needs to reflect the importance of a specif action and contrast with other page elements. On a landing page, your CTA needs to be seen immediately so that your user knows what to if he is interested in your product. Most of the time you will need 3 different button designs. One is the primary action in a solid color to emphasize the main action of a page. The secondary action with a transparent background and a solid border, and a text button for less important actions. Here you will a selection of button designs from other brands to help you find inspiration for your new button design.

Bootstrap 🔗 Design System

Stripe

Airbnb

Twitch

GitHub 🔗 Design System

Shopify 🔗 Design System

Mailchimp 🔗 Design System

Carbon ( IBM ) 🔗 Design System

Salesforce 🔗 Design System

Atlassian 🔗 Design System

Flexport 🔗 Design System

Biteable 🔗 Design System

Material Design 🔗 Design System

Spotify

Discord

Tailwindcss 🔗 Design System

Fluent UI ( Microsoft ) 🔗 Design System

Amazon

Techcrunch

Producthunt

Indie hackers

Buy me a coffee

HEY

Slack

RemoteOK

Forem

Next.js

Wes Bos

Linear

Figma

Algolia

MongoDB 🔗 Design System