- Published on
6 Tips To Make A Buttons With Tailwind CSS
- What is Tailwind CSS?
- The description of Buttons UI component
- Why use Tailwind CSS to create a Buttons UI component?
- The preview of Buttons UI component
- The source code of Buttons UI component
- How to create a Buttons with Tailwind CSS?
- Step 1: Install Tailwind CSS
- Step 2: Create a button element
- Step 3: Apply button styles
- Step 4: Add responsive styles
- Step 5: Add hover and focus styles
- Step 6: Add disabled state
- Conclusion
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to create responsive and customizable user interfaces. It allows developers to quickly build UI components without writing custom CSS code, which saves time and improves productivity.
The description of Buttons UI component
Buttons are one of the most common UI components used in web applications. They are used to trigger actions, navigate between pages, and interact with users. Buttons can be styled in different ways to match the design of the application and provide better user experience.
Why use Tailwind CSS to create a Buttons UI component?
Tailwind CSS provides a set of pre-defined classes that can be used to create buttons with different styles and sizes. It also supports responsive design, which means that buttons can be adjusted to fit different screen sizes. Using Tailwind CSS to create buttons can save time and improve productivity, as developers do not need to write custom CSS code.
The preview of Buttons UI component
Buttons can be styled in different ways using Tailwind CSS. Some of the styles that can be applied to buttons include:
- Primary button
- Secondary button
- Success button
- Warning button
- Danger button
- Info button
Free download of the Buttons's source code
The source code of Buttons UI component
The source code for creating buttons with Tailwind CSS is straightforward. It involves creating a button element and applying the appropriate classes to style it. The classes can be customized to match the design of the application.
<div class="flex py-8">
<!-- Icons Only -->
<div class="flex flex-col">
<button
class="inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-white border-gray-300 text-gray-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-activity -mx-2 leading-5"
>
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</svg>
</button>
<button
class="mt-4 inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-blue-600 border-blue-600 text-gray-100 hover:bg-blue-500 hover:border-blue-500 hover:text-gray-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-airplay -mx-2 leading-5"
>
<path
d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"
></path>
<polygon points="12 15 17 21 7 21 12 15"></polygon>
</svg>
</button>
<button
class="mt-4 inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-green-600 border-green-600 text-gray-100 hover:bg-green-500 hover:border-green-500 hover:text-gray-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-archive -mx-2 leading-5"
>
<polyline points="21 8 21 21 3 21 3 8"></polyline>
<rect x="1" y="3" width="22" height="5"></rect>
<line x1="10" y1="12" x2="14" y2="12"></line>
</svg>
</button>
<button
class="mt-4 inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-orange-600 border-orange-600 text-gray-100 hover:bg-orange-500 hover:border-orange-500 hover:text-gray-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-arrow-right -mx-2 leading-5"
>
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</button>
<button
class="mt-4 inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-red-600 border-red-600 text-gray-100 hover:bg-red-500 hover:border-red-500 hover:text-gray-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-bell-off -mx-2 leading-5"
>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
<path d="M18.63 13A17.89 17.89 0 0 1 18 8"></path>
<path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14"></path>
<path d="M18 8a6 6 0 0 0-9.33-5"></path>
<line x1="1" y1="1" x2="23" y2="23"></line>
</svg>
</button>
</div>
<!-- Text Only -->
<div class="flex flex-col ml-4">
<button
class="inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-white border-gray-300 text-gray-700"
>
Button
</button>
<button
class="mt-4 inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-blue-600 border-blue-600 text-gray-100 hover:bg-blue-500 hover:border-blue-500 hover:text-gray-100"
>
Button
</button>
<button
class="mt-4 inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-green-600 border-green-600 text-gray-100 hover:bg-green-500 hover:border-green-500 hover:text-gray-100"
>
Button
</button>
<button
class="mt-4 inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-orange-600 border-orange-600 text-gray-100 hover:bg-orange-500 hover:border-orange-500 hover:text-gray-100"
>
Button
</button>
<button
class="mt-4 inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-red-600 border-red-600 text-gray-100 hover:bg-red-500 hover:border-red-500 hover:text-gray-100"
>
Button
</button>
</div>
<!-- With Icon -->
<div class="flex flex-col ml-4">
<button
class="inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-white border-gray-300 text-gray-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-activity leading-5 mr-2"
>
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</svg>
Button
</button>
<button
class="mt-4 inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-blue-600 border-blue-600 text-gray-100 hover:bg-blue-500 hover:border-blue-500 hover:text-gray-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-airplay leading-5 mr-2"
>
<path
d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"
></path>
<polygon points="12 15 17 21 7 21 12 15"></polygon>
</svg>
Button
</button>
<button
class="mt-4 inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-green-600 border-green-600 text-gray-100 hover:bg-green-500 hover:border-green-500 hover:text-gray-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-archive leading-5 mr-2"
>
<polyline points="21 8 21 21 3 21 3 8"></polyline>
<rect x="1" y="3" width="22" height="5"></rect>
<line x1="10" y1="12" x2="14" y2="12"></line>
</svg>
Button
</button>
<button
class="mt-4 inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-orange-600 border-orange-600 text-gray-100 hover:bg-orange-500 hover:border-orange-500 hover:text-gray-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-arrow-right leading-5 mr-2"
>
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
Button
</button>
<button
class="mt-4 inline-flex items-center justify-center px-4 py-2 text-base leading-5 rounded-md border font-medium shadow-sm transition ease-in-out duration-150 focus:outline-none focus:shadow-outline bg-red-600 border-red-600 text-gray-100 hover:bg-red-500 hover:border-red-500 hover:text-gray-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-bell-off leading-5 mr-2"
>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
<path d="M18.63 13A17.89 17.89 0 0 1 18 8"></path>
<path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14"></path>
<path d="M18 8a6 6 0 0 0-9.33-5"></path>
<line x1="1" y1="1" x2="23" y2="23"></line>
</svg>
Button
</button>
</div>
</div>
How to create a Buttons with Tailwind CSS?
Creating buttons with Tailwind CSS involves the following steps:
Step 1: Install Tailwind CSS
To use Tailwind CSS, you need to install it in your project. You can install it using npm or yarn.
npm install tailwindcss
Step 2: Create a button element
Create a button element in your HTML file.
<button class="btn">Click me</button>
Step 3: Apply button styles
Apply the appropriate classes to style the button. For example, to create a primary button, use the following classes:
<button class="btn btn-primary">Click me</button>
You can also customize the button styles by adding your own classes or modifying the existing ones.
Step 4: Add responsive styles
Tailwind CSS supports responsive design, which means that you can adjust the button styles to fit different screen sizes. For example, to create a smaller button on mobile devices, use the following classes:
<button class="btn btn-primary btn-sm md:btn-lg">Click me</button>
This will create a small button on mobile devices and a large button on larger screens.
Step 5: Add hover and focus styles
To add hover and focus styles to the button, use the following classes:
<button class="btn btn-primary hover:bg-blue-700 focus:bg-blue-700">Click me</button>
This will change the background color of the button when it is hovered or focused.
Step 6: Add disabled state
To add a disabled state to the button, use the disabled
attribute and the following classes:
<button class="btn btn-primary disabled:opacity-50" disabled>Click me</button>
This will reduce the opacity of the button when it is disabled.
Conclusion
Tailwind CSS provides a set of pre-defined classes that can be used to create buttons with different styles and sizes. Using Tailwind CSS to create buttons can save time and improve productivity, as developers do not need to write custom CSS code. By following the steps outlined in this article, you can create buttons that match the design of your application and provide better user experience.