Published on

Make A Github Buttons With Tailwind CSS Like A Pro With The Help Of These 6 Tips

Github buttons

As a FrontEnd developer, you might have heard of Tailwind CSS, a utility-first CSS framework that helps you build custom designs quickly. In this article, we will explore how to create Github buttons with Tailwind CSS like a pro.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes that you can use to style your HTML elements. It is designed to help you build custom designs quickly by providing a low-level utility class that you can combine to create complex designs.

The description of Github buttons UI component

Github buttons are a set of UI components that allow users to interact with Github repositories. They are usually used to indicate the state of a repository, such as whether it is starred, forked, or watched. Github buttons come in different sizes and colors, and they can be customized to fit the design of your website.

Why use Tailwind CSS to create a Github buttons UI component?

Tailwind CSS provides a set of pre-defined CSS classes that you can use to create Github buttons quickly. It also allows you to customize the buttons to fit the design of your website. With Tailwind CSS, you don't have to write custom CSS for each button, which saves you time and effort.

The preview of Github buttons UI component

To create Github buttons with Tailwind CSS, we will use the following classes:

  • bg-gray-800: sets the background color of the button to gray-800.
  • text-white: sets the text color of the button to white.
  • px-4: sets the horizontal padding of the button to 4.
  • py-2: sets the vertical padding of the button to 2.
  • rounded: rounds the corners of the button.

Free download of the Github buttons's source code

The source code of Github buttons UI component

To create a Github button with Tailwind CSS, you can use the following HTML code:

<button class="bg-gray-800 text-white px-4 py-2 rounded">
  Button
</button>
<button class="mr-5 rounded-lg bg-green-600 py-2 px-6 font-bold text-white hover:bg-green-700">
  Button
</button>

<button
  class="mr-5 rounded-md border border-gray-400 bg-gray-200 py-2 px-6 font-bold text-black hover:bg-gray-300"
>
  Button
</button>

<button
  class="mr-5 rounded-lg border border-gray-400 bg-gray-200 py-2 px-6 font-bold text-blue-600 hover:bg-blue-700 hover:text-white"
>
  Button
</button>

<button class="mr-5 rounded-lg border border-blue-700 bg-blue-700 py-2 px-6 font-bold text-white">
  Button
</button>

<button class="mr-5 bg-white py-2 px-6 font-bold text-black hover:bg-blue-700 hover:text-white">
  Button
</button>

How to create a Github buttons with Tailwind CSS?

Now that we have a basic understanding of Github buttons and Tailwind CSS, let's dive into how to create Github buttons with Tailwind CSS.

Step 1: Set up your project

Before we start, we need to set up our project. You can either download Tailwind CSS from the official website or use a CDN. In this article, we will use a CDN.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Github Buttons with Tailwind CSS</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
</head>
<body>
  <!-- Button code goes here -->
</body>
</html>

Step 2: Create a basic button

Let's start by creating a basic Github button. We will use the classes we mentioned earlier to create a gray button with white text.

<button class="bg-gray-800 text-white px-4 py-2 rounded">
  Button
</button>

Step 3: Customize the button

Now that we have a basic button, let's customize it to fit the design of our website. We can change the background color, text color, padding, and border radius of the button.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Here, we have changed the background color to blue-500, added a hover effect, changed the text color to white, made the text bold, increased the padding, and rounded the corners of the button.

Step 4: Add different sizes

Github buttons come in different sizes. We can add different sizes to our button by using the btn-sm, btn-lg, and btn-xl classes.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded btn-sm">
  Small Button
</button>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded btn-lg">
  Large Button
</button>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded btn-xl">
  Extra Large Button
</button>

Step 5: Add different colors

Github buttons come in different colors. We can add different colors to our button by using the bg-red-500, bg-green-500, and bg-yellow-500 classes.

<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
  Red Button
</button>

<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
  Green Button
</button>

<button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded">
  Yellow Button
</button>

Step 6: Add icons

Github buttons often contain icons. We can add icons to our button by using Font Awesome icons.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  <i class="fa fa-star"></i> Star
</button>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  <i class="fa fa-code-fork"></i> Fork
</button>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  <i class="fa fa-eye"></i> Watch
</button>

Here, we have added Font Awesome icons to our button.

Conclusion

In this article, we have explored how to create Github buttons with Tailwind CSS. We have learned how to set up our project, create a basic button, customize the button, add different sizes and colors, and add icons. With these tips, you can create Github buttons like a pro.