DEV Community

Cover image for Tailwind CSS Simple Button Examples
saim
saim

Posted on • Originally published at larainfo.com

Tailwind CSS Simple Button Examples

#tailwindcss #webdev #tutorial #css

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

Setup Project

Using CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

or

The Easiest way to install Tailwind CSS with Tailwind CLI

How to Install Tailwind CSS with NPM

Example 1

Simple Button

<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>
Enter fullscreen mode Exit fullscreen mode

larainfo

Example 2

Rounded Button

<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>
Enter fullscreen mode Exit fullscreen mode

larainfo

Example 3

Hovered Effect Button

<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>
Enter fullscreen mode Exit fullscreen mode

larainfo

Example 4

Outline Button

<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>
Enter fullscreen mode Exit fullscreen mode

larainfo

Example 5

Button With Icon

<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>
Enter fullscreen mode Exit fullscreen mode

larainfo

See Also 👇

Tailwind CSS Simple Responsive Image Gallery with Grid
Tailwind CSS Simple Alert Components Examples
Tailwind CSS Simple Card Examples
Tailwind CSS Badge Examples
Tailwind CSS Simple Modals Examples
Tailwind CSS Simple Avatar Examples

Top comments (0)

Read next

mikevarenek profile image

Best Free Tailwind Landing Page Templates

Mike Varenek -

allahisrabb profile image

How I linked my Kali Linux to my github account through SSH

Abdussalam Mujeeb-ur-rahman -

muneebkh2 profile image

Laravel - Unlock the Power of Laravel Gates for Simplified Authorization

Muneeb Ur Rehman -

sameeranthony profile image

Exploring the Versatility of Web Scraping APIs for Data Extraction

sameer -