Tailwind CSS Button

Use our buttons based on Tailwind CSS for actions in forms, dialogues, and more with support for multiple sizes, states, and more.

Buttons are an essential element of web design. Basically, buttons are styled links that grab the users’ attention. They help users navigate our websites or apps and drive them to a particular action like submitting a contact form, or placing an order as easily as possible.

See below our button components examples.

<button class="button button-pink">Button</button>

Button Variants

See our button examples below. They come in different styles and color:

<button class="button button-pink mr-3" data-ripple-light>Button</button>
<button class="button button-gradient button-pink mr-3" data-ripple-light>
  Button
</button>
<button class="button button-outlined button-pink mr-3" data-ripple-dark>
  Button
</button>
<button class="button button-text button-pink mr-3" data-ripple-dark>
  Button
</button>
<button class="button button-icon button-pink" data-ripple-light>
  <i class="material-icons">dashboard</i>
</button>

Simple Buttons

Use this example to create a simple button element for your Tailwind CSS project.

<button class="button button-pink" data-ripple-light>Button</button>
<button class="button button-secondary" data-ripple-light>Button</button>
<button class="button button-green" data-ripple-light>Button</button>
<button class="button button-orange" data-ripple-light>Button</button>
<button class="button button-red" data-ripple-light>Button</button>
<button class="button button-dark" data-ripple-light>Button</button>

Buttons with gradients

Use this example to create a simple button element with gradient for your Tailwind CSS project.

<button class="button button-gradient button-pink" data-ripple-light>
  Button
</button>
<button class="button button-gradient button-secondary" data-ripple-light>
  Button
</button>
<button class="button button-gradient button-green" data-ripple-light>
  Button
</button>
<button class="button button-gradient button-orange" data-ripple-light>
  Button
</button>
<button class="button button-gradient button-red" data-ripple-light>
  Button
</button>
<button class="button button-gradient button-dark" data-ripple-light>
  Button
</button>

Button sizes

Use this example to create buttons in different sizes.

<button
  class="button button-gradient button-sm button-pink mb-3"
  data-ripple-light
>
  Button
</button>
<button class="button button-gradient button-pink mb-3" data-ripple-light>
  Button
</button>
<button
  class="button button-gradient button-lg button-pink mb-3"
  data-ripple-light
>
  Button
</button>