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>
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>
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>
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>
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>