Tailwind CSS Simple Button Examples
Tags: tailwindcss, webdev, tutorial, css
Published: 2021-07-25 08:10:44

In this tutorial we will see simple button, rounded button , hovered button , outline button, button with Icon, examples with Tailwind CSS

####Tool Use

######Tailwind CSS 2.x
######Heroicons Icons


👉 [View Demo](https://larainfo.com/blogs/tailwind-css-simple-button-examples)

Setup Project

Using CDN

```html
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
```
or 

[The Easiest way to install Tailwind CSS with Tailwind CLI](https://larainfo.com/blogs/the-easiest-way-to-install-tailwind-css-with-tailwind-cli)

[How to Install Tailwind CSS with NPM](https://larainfo.com/blogs/how-to-install-tailwind-css-with-npm)


####Example 1
Simple Button
```html
<button class="px-6 py-2 text-white bg-red-600" type="button">
     Button
</button>
<button class="px-6 py-2 text-white bg-indigo-600" type="button">
     Button
 </button>
```
![larainfo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28t5q327v58zh125lpsq.png)

####Example 2
Rounded Button
```html
<button class="px-6 py-2 text-white bg-red-600 rounded-full" type="button">
    Button
</button>
<button class="px-6 py-2 text-white bg-indigo-600 rounded-full" type="button">
    Button
</button>
```
![larainfo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qq26f725iaclzvbhzo3w.png)

####Example 3
Hovered Effect Button
```html
<button class="px-6 py-2 text-white bg-red-600 rounded-full hover:bg-red-400 hover:text-red-200"
        type="button">Button
</button>
<button class="px-6 py-2 text-white bg-indigo-600 rounded-full hover:bg-indigo-400 hover:text-indigo-200"
        type="button">Button
</button>
```
![larainfo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0h8ada8yhc58k45j65v.png)

###Example 4
Outline Button

```html
<button class="px-6 py-2 text-indigo-700 border-2 border-indigo-500 rounded-full hover:bg-indigo-500 hover:text-indigo-100">Button</button>
<button class="px-6 py-2 text-red-700 border-2 border-red-500 rounded-full hover:bg-red-500 hover:text-red-100">Button</button>
```
![larainfo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6eok39m3oud2fz6esqx3.png)

####Example 5
Button With Icon
```html
<button class="inline-flex items-center px-6 py-2 text-indigo-100 bg-indigo-700 rounded-full hover:bg-indigo-800">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2 text-green-800 bg-white rounded-full" fill="none"
        viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    <span>Button</span>
</button>
<button class="inline-flex items-center px-6 py-2 text-red-100 bg-red-700 rounded-full hover:bg-red-800">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2 text-green-800 bg-white rounded-full" fill="none"
        viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    <span>Button</span>
</button>
```
![larainfo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crpv5mfa48l4ywrlbmsk.png)

###See Also 👇
[Tailwind CSS Simple Responsive Image Gallery with Grid](https://larainfo.com/blogs/tailwind-css-simple-responsive-image-gallery-with-grid)
[Tailwind CSS Simple Alert Components Examples](https://larainfo.com/blogs/tailwind-css-simple-alert-components-examples)
[Tailwind CSS Simple Card Examples](https://larainfo.com/blogs/tailwind-css-simple-card-examples)
[Tailwind CSS Badge Examples](https://larainfo.com/blogs/tailwind-css-badge-examples)
[Tailwind CSS Simple Modals Examples](https://larainfo.com/blogs/tailwind-css-simple-modals-examples)
[Tailwind CSS Simple Avatar Examples](https://larainfo.com/blogs/tailwind-css-simple-avatar-examples)