Published on

Ways To Create A Fancy Button With Icon With Tailwind CSS In 60 Minutes

Fancy button with icon

As a FrontEnd technology blogger, it's always exciting to explore new ways to create stunning UI components. In this article, we'll be discussing how to create a fancy button with an icon using Tailwind CSS in just 60 minutes.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to create custom designs without writing any CSS. It provides a set of pre-defined classes that you can use to style your HTML elements. With Tailwind CSS, you can create responsive designs, and it's compatible with all modern browsers.

The description of Fancy button with icon ui component

A fancy button with an icon is a UI component that is commonly used in web applications. It's a button that has an icon on one side and text on the other. The button is usually styled with a gradient background, and the icon is placed at the center of the button.

Why use Tailwind CSS to create a Fancy button with icon ui component?

Tailwind CSS is a perfect choice for creating a fancy button with an icon because it provides a set of pre-defined classes that allow you to style your button quickly. With Tailwind CSS, you can easily add a gradient background, center the icon, and add text to the button.

The preview of Fancy button with icon ui component.

To create a fancy button with an icon using Tailwind CSS, we'll be using the following classes:

  • bg-gradient-to-r - This class is used to create a gradient background.
  • text-white - This class is used to set the text color to white.
  • flex - This class is used to create a flex container.
  • items-center - This class is used to center the items vertically.
  • justify-center - This class is used to center the items horizontally.
  • px-4 - This class is used to add padding to the left and right of the button.
  • py-2 - This class is used to add padding to the top and bottom of the button.
  • rounded-full - This class is used to create a circular button.
  • text-lg - This class is used to set the font size of the text.

Free download of the Fancy button with icon's source code

The source code of Fancy button with icon ui component.

To create a fancy button with an icon using Tailwind CSS, you can use the following HTML and CSS code:

<!-- This is an example component, icon based on https://heroicons.com/ -->
<div class="md:flex md:flex-flow-col md:grid-cols-3 md:grid-rows-3 gap-6 px-6">
    <div>
        <div>
            <h2 class="text-2xl mb-4 text-gray-700 font-bold">Flat button</h2>
            <hr class="bg-gray-500 w-full h-0.25 mb-5"/>
            <!-- button -->
            <div class="mb-4">
                <button type="button" class='flex max-w-sm w-full bg-gradient-to-r from-indigo-500 via-pink-500 to-yellow-500 hover:from-indigo-600 hover:via-pink-600 hover:to-red-600 focus:outline-none text-white text-2xl uppercase font-bold shadow-md mx-auto p-5'>
                    <div class="flex sm:flex-cols-12 gap-6">
                        <div class="col-span-1">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
                            </svg>
                        </div>
                        <div class="col-span-2 pt-1.5">Button name</div>
                    </div>    
                </button>
            </div>
            <!-- button -->
            <div class="mb-4">
                <button type="button" class='flex max-w-sm w-full bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 focus:outline-none text-white text-2xl uppercase font-bold shadow-md mx-auto p-5'>
                    <div class="flex sm:flex-cols-12 gap-6">
                        <div class="col-span-1">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
                            </svg>
                        </div>
                        <div class="col-span-2 pt-1.5">Button name</div>
                    </div>    
                </button>
            </div>
        </div>
    </div>
    <div>
        <div>
            <h2 class="text-2xl mb-4 text-gray-700 font-bold">Radius button</h2>
            <hr class="bg-gray-500 w-full h-0.25 mb-5"/>
            <!-- button -->
            <div class="mb-4">
                <button type="button" class='flex max-w-sm w-full bg-gradient-to-r from-indigo-500 via-pink-500 to-yellow-500 hover:from-indigo-600 hover:via-pink-600 hover:to-red-600 focus:outline-none text-white text-2xl uppercase font-bold shadow-md rounded-lg mx-auto p-5'>
                    <div class="flex sm:flex-cols-12 gap-6">
                        <div class="col-span-1">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
                            </svg>
                        </div>
                        <div class="col-span-2 pt-1.5">Button name</div>
                    </div>    
                </button>
            </div>
            <!-- button -->
            <div class="mb-4">
                <button type="button" class='flex max-w-sm w-full bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 focus:outline-none text-white text-2xl uppercase font-bold shadow-md rounded-lg mx-auto p-5'>
                    <div class="flex sm:flex-cols-12 gap-6">
                        <div class="col-span-1">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
                            </svg>
                        </div>
                        <div class="col-span-2 pt-1.5">Button name</div>
                    </div>    
                </button>
            </div>
        </div>
    </div>
    <div>
        <div>
            <h2 class="text-2xl mb-4 text-gray-700 font-bold">Rounded button</h2>
            <hr class="bg-gray-500 w-full h-0.25 mb-5"/>
            <!-- button -->
            <div class="mb-4">
                <button type="button" class='flex max-w-sm w-full bg-gradient-to-r from-indigo-500 via-pink-500 to-yellow-500 hover:from-indigo-600 hover:via-pink-600 hover:to-red-600 focus:outline-none text-white text-2xl uppercase font-bold shadow-md rounded-full mx-auto p-5'>
                <div class="flex sm:flex-cols-12 gap-2">
                    <div class="col-span-1">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
                        </svg>
                    </div>
                    <div class="col-span-2 pt-2">Button name</div>
                </div>    
            </button>
            </div>
            <!-- button -->
            <div class="mb-4">
                <button type="button" class='flex max-w-sm w-full bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 focus:outline-none text-white text-2xl uppercase font-bold shadow-md rounded-full mx-auto p-5'>
                    <div class="flex sm:flex-cols-12 gap-2">
                        <div class="col-span-1">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
                            </svg>
                        </div>
                        <div class="col-span-2 pt-2">Button name</div>
                    </div>    
                </button>
            </div>
        </div>
    </div>

</div>

How to create a Fancy button with icon with Tailwind CSS?

Now that we have a basic understanding of Tailwind CSS and the fancy button with an icon UI component let's dive into creating one.

Step 1: Set up the HTML

First, we need to set up the HTML for our button. We'll create a button element and add an svg element inside it to display the icon.

<button class="bg-gradient-to-r from-purple-400 to-pink-500 text-white flex items-center justify-center px-4 py-2 rounded-full">
  <svg class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
    <path fill-rule="evenodd" d="M4.293 7.293a1 1 0 011.414 0L10 11.586l4.293-4.293a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z" clip-rule="evenodd" />
  </svg>
  <span class="text-lg font-medium">Download</span>
</button>

Step 2: Style the button using Tailwind CSS

Next, we'll add the Tailwind CSS classes to style our button. We'll use the bg-gradient-to-r class to create a gradient background, the text-white class to set the text color to white, and the rounded-full class to create a circular button.

<button class="bg-gradient-to-r from-purple-400 to-pink-500 text-white flex items-center justify-center px-4 py-2 rounded-full">
  <svg class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
    <path fill-rule="evenodd" d="M4.293 7.293a1 1 0 011.414 0L10 11.586l4.293-4.293a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z" clip-rule="evenodd" />
  </svg>
  <span class="text-lg font-medium">Download</span>
</button>

Step 3: Add hover and focus effects

Finally, we'll add hover and focus effects to our button using Tailwind CSS. We'll use the hover:bg-pink-600 class to change the background color of the button on hover, and the focus:outline-none class to remove the outline when the button is in focus.

<button class="bg-gradient-to-r from-purple-400 to-pink-500 hover:bg-pink-600 focus:outline-none text-white flex items-center justify-center px-4 py-2 rounded-full">
  <svg class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
    <path fill-rule="evenodd" d="M4.293 7.293a1 1 0 011.414 0L10 11.586l4.293-4.293a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z" clip-rule="evenodd" />
  </svg>
  <span class="text-lg font-medium">Download</span>
</button>

Conclusion

In this article, we've discussed how to create a fancy button with an icon using Tailwind CSS in just 60 minutes. We've also seen how Tailwind CSS provides a set of pre-defined classes that allow you to style your HTML elements quickly. With Tailwind CSS, you can create responsive designs and customize your UI components without writing any CSS. So, if you're looking to create stunning UI components quickly, give Tailwind CSS a try!