Published on

6 Easy Ways To Create A Md Bootstrap Buttons With Tailwind CSS

md bootstrap buttons

As a FrontEnd technology blogger, it is important to stay up-to-date with the latest trends and tools in the industry. One such tool that has gained popularity in recent times is Tailwind CSS. Tailwind CSS is a utility-first CSS framework that provides pre-defined classes to style your HTML elements. In this article, we will explore how to create a md bootstrap buttons UI component with Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes to style your HTML elements. It is designed to be highly customizable, allowing you to create unique designs without writing custom CSS. Tailwind CSS is gaining popularity among developers due to its ease of use and flexibility.

The description of md bootstrap buttons UI component

MD Bootstrap is a popular UI library that provides a wide range of UI components. One such component is the button. The button component is used to create clickable elements that perform an action when clicked. The button component in MD Bootstrap comes with pre-defined styles that can be customized to fit your design needs.

Why use Tailwind CSS to create a md bootstrap buttons UI component?

Tailwind CSS provides pre-defined classes that can be used to style the button component in MD Bootstrap. This makes it easier to create custom styles without writing custom CSS. Additionally, Tailwind CSS is highly customizable, allowing you to create unique designs that fit your project requirements.

The preview of md bootstrap buttons UI component

To create a md bootstrap buttons UI component with Tailwind CSS, we will be using the pre-defined classes provided by Tailwind CSS. The button component in MD Bootstrap comes with pre-defined styles that can be customized using Tailwind CSS classes. Here is a preview of what the md bootstrap buttons UI component will look like:

Free download of the md bootstrap buttons's source code

The source code of md bootstrap buttons UI component

To create a md bootstrap buttons UI component with Tailwind CSS, we will be using the pre-defined classes provided by Tailwind CSS. The button component in MD Bootstrap comes with pre-defined styles that can be customized using Tailwind CSS classes. Here is the source code of the md bootstrap buttons UI component:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/waves.min.css" />

<div class="space-y-8 mb-6">
        <div class="m-6 space-x-3 space-y-3">
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-blue-700 rounded shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none"
          >
            Primary
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-pink-500 rounded shadow ripple hover:shadow-lg hover:bg-pink-600 focus:outline-none"
          >
            Secondary
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-green-500 rounded shadow ripple hover:shadow-lg hover:bg-green-600 focus:outline-none"
          >
            Success
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-red-500 rounded shadow ripple hover:shadow-lg hover:bg-red-600 focus:outline-none"
          >
            Danger
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-yellow-500 rounded shadow ripple hover:shadow-lg hover:bg-yellow-600 focus:outline-none"
          >
            Warning
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-indigo-500 rounded shadow ripple hover:shadow-lg hover:bg-indigo-600 focus:outline-none"
          >
            Info
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-black uppercase transition bg-gray-100 rounded shadow ripple hover:shadow-lg hover:bg-gray-200 focus:outline-none"
          >
            Light
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-black rounded shadow ripple waves-light hover:shadow-lg focus:outline-none hover:bg-black"
          >
            Dark
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-blue-700 underline uppercase transition bg-transparent rounded ripple hover:text-blue-900 focus:outline-none"
          >
            Link
          </button>
        </div>
        <div class="m-6 space-x-3 space-y-3">
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-blue-700 rounded-full shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none"
          >
            Primary
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-pink-500 rounded-full shadow ripple hover:shadow-lg hover:bg-pink-600 focus:outline-none"
          >
            Secondary
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-green-500 rounded-full shadow ripple hover:shadow-lg hover:bg-green-600 focus:outline-none"
          >
            Success
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-red-500 rounded-full shadow ripple hover:shadow-lg hover:bg-red-600 focus:outline-none"
          >
            Danger
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-yellow-500 rounded-full shadow ripple hover:shadow-lg hover:bg-yellow-600 focus:outline-none"
          >
            Warning
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-indigo-500 rounded-full shadow ripple hover:shadow-lg hover:bg-indigo-600 focus:outline-none"
          >
            Info
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-black uppercase transition bg-gray-100 rounded-full shadow ripple hover:shadow-lg hover:bg-gray-200 focus:outline-none"
          >
            Light
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-black rounded-full shadow ripple waves-light hover:shadow-lg focus:outline-none hover:bg-black"
          >
            Dark
          </button>
        </div>
        <div class="m-6 space-x-3 space-y-3">
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-blue-700 uppercase transition bg-transparent border-2 border-blue-700 rounded ripple hover:bg-blue-100 focus:outline-none"
          >
            Primary
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-pink-500 uppercase transition bg-transparent border-2 border-pink-500 rounded ripple hover:bg-pink-100 focus:outline-none"
          >
            Secondary
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-green-500 uppercase transition bg-transparent border-2 border-green-500 rounded ripple hover:bg-green-100 focus:outline-none"
          >
            Success
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-red-500 uppercase transition bg-transparent border-2 border-red-500 rounded ripple hover:bg-red-100 focus:outline-none"
          >
            Danger
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-yellow-500 uppercase transition bg-transparent border-2 border-yellow-500 rounded ripple hover:bg-yellow-100 focus:outline-none"
          >
            Warning
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-indigo-500 uppercase transition bg-transparent border-2 border-indigo-500 rounded ripple hover:bg-indigo-100 focus:outline-none"
          >
            Info
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-black uppercase transition bg-transparent border-2 border-black rounded ripple hover:bg-gray-100 focus:outline-none"
          >
            Dark
          </button>
        </div>
        <div class="m-6 space-x-3 space-y-3">
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-blue-700 uppercase transition bg-transparent border-2 border-blue-700 rounded-full ripple hover:bg-blue-100 focus:outline-none"
          >
            Primary
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-pink-500 uppercase transition bg-transparent border-2 border-pink-500 rounded-full ripple hover:bg-pink-100 focus:outline-none"
          >
            Secondary
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-green-500 uppercase transition bg-transparent border-2 border-green-500 rounded-full ripple hover:bg-green-100 focus:outline-none"
          >
            Success
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-red-500 uppercase transition bg-transparent border-2 border-red-500 rounded-full ripple hover:bg-red-100 focus:outline-none"
          >
            Danger
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-yellow-500 uppercase transition bg-transparent border-2 border-yellow-500 rounded-full ripple hover:bg-yellow-100 focus:outline-none"
          >
            Warning
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-indigo-500 uppercase transition bg-transparent border-2 border-indigo-500 rounded-full ripple hover:bg-indigo-100 focus:outline-none"
          >
            Info
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-black uppercase transition bg-transparent border-2 border-black rounded-full ripple hover:bg-gray-100 focus:outline-none"
          >
            Dark
          </button>
        </div>
        
        <div class="m-6 space-x-3">
          <button
            class="inline-block p-3 text-center text-white transition bg-blue-700 rounded-full shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none"
          >
            <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path
                fill-rule="evenodd"
                d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
          <button
            class="inline-block p-3 text-center text-white transition bg-red-500 rounded-full shadow ripple hover:shadow-lg hover:bg-red-600 focus:outline-none"
          >
            <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path
                fill-rule="evenodd"
                d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
          <button
            class="inline-block p-3 text-center text-white transition border border-yellow-500 rounded-full ripple hover:bg-yellow-100 focus:outline-none"
          >
            <svg
              class="w-5 h-5 text-yellow-500"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
              />
            </svg>
          </button>
        </div>

        <!-- Brand Icons -->
        <!-- https://simpleicons.org/ -->
        <div class="m-6 space-x-3">
          <!-- Github -->
          <button
            class="inline-block px-4 py-2 text-center text-white transition bg-black rounded shadow ripple waves-light hover:shadow-lg hover:bg-black focus:outline-none"
          >
            <svg class="w-5 h-5 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path
                d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
              />
            </svg>
          </button>
          <!-- Twitter -->
          
          <button
            class="inline-block px-4 py-2 text-center text-white transition bg-blue-500 rounded shadow ripple hover:shadow-lg hover:bg-blue-600 focus:outline-none"
          >
            <svg class="w-5 h-5 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path
                d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
              />
            </svg>
          </button>
        </div>

        <div class="m-6 space-y-3 w-72">
          <button
            class="block w-full px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-blue-700 rounded shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none"
          >
            Primary
          </button>
          <button
            class="block w-full px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-pink-500 rounded shadow ripple hover:shadow-lg hover:bg-pink-600 focus:outline-none"
          >
            Secondary
          </button>
        </div>

        <div class="m-6 space-x-3 space-y-3">
          <button
            class="inline-block px-4 py-2 text-xs font-medium text-center text-white uppercase transition bg-blue-700 rounded shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none"
          >
            Button
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-blue-700 rounded shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none"
          >
            Button
          </button>
          <button
            class="inline-block px-6 py-2 font-medium leading-7 text-center text-white uppercase transition bg-blue-700 rounded shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none"
          >
            Button
          </button>
          <button
            class="inline-block px-4 py-2 text-xs font-medium text-center text-white uppercase transition bg-blue-700 rounded-full shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none"
          >
            Button
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-blue-700 rounded-full shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none"
          >
            Button
          </button>
          <button
            class="inline-block px-6 py-2 font-medium leading-7 text-center text-white uppercase transition bg-blue-700 rounded-full shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none"
          >
            Button
          </button>
        </div>
        <div class="m-6 space-x-3 space-y-3">
          <button
            class="inline-block px-4 py-2 text-xs font-medium text-center text-blue-700 uppercase transition bg-transparent border-2 border-blue-700 rounded shadow ripple hover:shadow-lg hover:bg-blue-100 focus:outline-none"
          >
            Button
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-blue-700 uppercase transition bg-transparent border-2 border-blue-700 rounded shadow ripple hover:shadow-lg hover:bg-blue-100 focus:outline-none"
          >
            Button
          </button>
          <button
            class="inline-block px-6 py-2 font-medium leading-7 text-center text-blue-700 uppercase transition bg-transparent border-2 border-blue-700 rounded shadow ripple hover:shadow-lg hover:bg-blue-100 focus:outline-none"
          >
            Button
          </button>
          <button
            class="inline-block px-4 py-2 text-xs font-medium text-center text-blue-700 uppercase transition bg-transparent border-2 border-blue-700 rounded-full shadow ripple hover:shadow-lg hover:bg-blue-100 focus:outline-none"
          >
            Button
          </button>
          <button
            class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-blue-700 uppercase transition bg-transparent border-2 border-blue-700 rounded-full shadow ripple hover:shadow-lg hover:bg-blue-100 focus:outline-none"
          >
            Button
          </button>
          <button
            class="inline-block px-6 py-2 font-medium leading-7 text-center text-blue-700 uppercase transition bg-transparent border-2 border-blue-700 rounded-full shadow ripple hover:shadow-lg hover:bg-blue-100 focus:outline-none"
          >
            Button
          </button>
        </div>

      </div>

    <!-- http://fian.my.id/Waves/ -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/waves.min.js"></script>
    <script type="text/javascript">
      Waves.attach('.ripple')
      Waves.init()
    </script>

How to create a md bootstrap buttons with Tailwind CSS?

Now that we have seen the preview and source code of the md bootstrap buttons UI component, let's explore how to create it with Tailwind CSS.

Step 1: Install Tailwind CSS

The first step is to install Tailwind CSS. You can install it using npm or yarn.

npm install tailwindcss

or

yarn add tailwindcss

Step 2: Create a Tailwind CSS configuration file

Next, create a Tailwind CSS configuration file. You can create a file named tailwind.config.js in the root directory of your project.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Step 3: Configure Tailwind CSS

In the tailwind.config.js file, you can configure Tailwind CSS to include the pre-defined classes for the button component in MD Bootstrap.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
  theme: {
    extend: {
      colors: {
        'mdb-blue': '#0d6efd',
        'mdb-indigo': '#6610f2',
        'mdb-purple': '#6f42c1',
        'mdb-pink': '#d63384',
        'mdb-red': '#dc3545',
        'mdb-orange': '#fd7e14',
        'mdb-yellow': '#ffc107',
        'mdb-green': '#198754',
        'mdb-teal': '#20c997',
        'mdb-cyan': '#0dcaf0',
        'mdb-white': '#fff',
        'mdb-gray': '#6c757d',
        'mdb-gray-dark': '#343a40',
        'mdb-primary': '#0d6efd',
        'mdb-secondary': '#6c757d',
        'mdb-success': '#198754',
        'mdb-info': '#0dcaf0',
        'mdb-warning': '#ffc107',
        'mdb-danger': '#dc3545',
        'mdb-light': '#f8f9fa',
        'mdb-dark': '#343a40',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
}

Step 4: Create the button component

Now that we have configured Tailwind CSS, we can create the button component using the pre-defined classes provided by MD Bootstrap and Tailwind CSS.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>

Step 5: Customize the button component

To customize the button component, we can use the pre-defined Tailwind CSS classes. For example, to change the background color of the primary button, we can use the bg-mdb-blue class.

<button class="btn btn-primary bg-mdb-blue">Primary</button>

We can also use the hover: and focus: prefixes to add styles on hover and focus.

<button class="btn btn-primary bg-mdb-blue hover:bg-mdb-indigo focus:bg-mdb-purple">Primary</button>

Conclusion

In this article, we explored how to create a md bootstrap buttons UI component with Tailwind CSS. We saw how Tailwind CSS provides pre-defined classes that can be used to style the button component in MD Bootstrap. We also saw how to customize the button component using the pre-defined Tailwind CSS classes. With Tailwind CSS, creating custom UI components has never been easier.