Collection of free Tailwind CSS button components from Codepen and other resources.

Demo image: Top Button

Author

  • Hafiz_Dev

Made with

  • HTML / CSS / JS

About a code

Top Button

Button used to go back to the top.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 3.0.18

Demo image: Tailwind CSS Button with Icon

Author

  • Postsrc

Made with

  • HTML / CSS

About a code

Tailwind CSS Button with Icon

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.7

Demo image: Social Media Buttons

Author

  • Hüseyin Tunç

Made with

  • HTML / CSS / JS

About a code

Social Media Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, tippy.js

Tailwind version: 2.2.4

Author

  • andikaPs

Made with

  • HTML / CSS

About a code

Simple Button Animation Scale

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Payment Buttons

Author

  • zoltanszogyenyi

Made with

  • HTML / CSS

About a code

Payment Buttons

Use these payment option button elements on a product checkout page or NFT minting page.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

Author

  • ahampriyanshu

Made with

  • HTML / CSS

About a code

Circular SVG Showreel

Play video on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

Demo image: Material Buttons

Author

  • lohnsonok

Made with

  • HTML / CSS

About a code

Material Buttons

Material Design buttons styled.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Hoverable Neon Buttons

Author

  • NULL

Made with

  • HTML / CSS

About a code

Hoverable Neon Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Fancy Button with Icon

Author

  • andrymuharyo

Made with

  • HTML / CSS

About a code

Fancy Button with Icon

Tailwind fancy button with icon.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Button Outline Flat

Author

  • tom-dr

Made with

  • HTML / CSS

About a code

Button Outline Flat

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Author

  • Paul Koeck

Made with

  • HTML / CSS / JS

About a code

Tailwind Download Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Button with Banner

Author

  • Mamba UI

Made with

  • HTML / CSS

About a code

Button with Banner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.0

Demo image: Social Media Buttons

Author

  • atularvind

Made with

  • HTML / CSS

About a code

Social Media Buttons

Tailwind social media buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.1.4

Demo image: Button Styles

Author

  • Scott Windon

Made with

  • HTML / CSS

About a code

Button Styles

Based on Pegasus Design System UI Kit.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: materialdesignicons.css

Tailwind version: 2.1.4

Demo image: 3D Button

Author

  • BassamLB

Made with

  • HTML / CSS

About a code

3D Button

3D button with Tailwind.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.1.4

Author

  • Carlo Taleon

Made with

  • HTML / CSS / JS

About a code

Strapi.io Style Buttons with Tailwind and CSS Keyframes

This uses Tailwind CSS for the CSS Grid, button shapes, as well as the animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.4

Demo image: Blue Buttons Example

Author

  • GeorgeElliott

Made with

  • HTML / CSS

About a code

Blue Buttons Example

Blue buttons with Github icon and with raised effect button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.3

Author

  • Daniel Painter

Made with

  • HTML / CSS / JS

About a code

Download Button + Tailwind

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.1

Demo image: Social Share Button with Dropdown-Menu

Author

  • kematzy

Made with

  • HTML / CSS

About a code

Social Share Button with Dropdown-Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.9.6

Demo image: Github Buttons

Author

  • devdojo

Made with

  • HTML / CSS / JS

About a code

Github Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 1.8.3

Demo image: Button with Menu

Author

  • khatabwedaa

Made with

  • HTML / CSS / JS

About a code

Button with Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 1.7.0

Author

  • David Kerns

Made with

  • HTML / CSS / JS

About a code

I Love This Button

Minimal use of Tailwind in this example just to center the button and set the bg color. Ignore that, could easily be extracted. Using alpine.js just to toggle state on click.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 1.5.0

Demo image: Button Group

Author

  • haynajjar

Made with

  • HTML / CSS

About a code

Button Group

Tailwind button group example.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.3.4

Demo image: Premium Banner Around Button

Author

  • JeanPaulvB

Made with

  • HTML / CSS

About a code

Premium Banner Around Button

Works in most browsers, automatically centers text. Be sure to fiddle around with the negative top and right margins to get the correct position for the banner (this also depends on the width and height of the ribbon).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0

Demo image: Minecraft Button

Author

  • Astro_Corp

Made with

  • HTML / CSS

About a code

Minecraft Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0

Demo image: White Bottom with Underline

Author

  • simpleuiux

Made with

  • HTML / CSS

About a code

White Bottom with Underline

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0

Demo image: Fortnite Button

Author

  • Astro_Corp

Made with

  • HTML / CSS

About a code

Fortnite Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0

Demo image: Buttons with Icons

Author

  • lhermann

Made with

  • HTML / CSS

About a code

Buttons with Icons

Buttons with inline SVGs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.0.4

Demo image: Buttons with SVG Icons

Author

  • _qbert

Made with

  • HTML / CSS

About a code

Buttons with SVG Icons

A couple button examples with SVG icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 0.3.0