Tailwind CSS Large Outline Buttons

Use our large outline buttons for Tailwind CSS in different styles and colors for call to actions in forms and more.

Only Text

Choose this basic button, only with text.

<button class="text-pink-500 border border-pink-500 hover:bg-pink-500 hover:text-white active:bg-pink-600 font-bold uppercase px-8 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  Large
</button>

Icon and Text

Or, you can go with an icon alongside your text.

<button class="text-pink-500 border border-pink-500 hover:bg-pink-500 hover:text-white active:bg-pink-600 font-bold uppercase px-8 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  <i class="fas fa-heart"></i> Large
</button>

Just Icon

Icons are enough so your users will know what the button does.

<button class="text-pink-500 border border-pink-500 hover:bg-pink-500 hover:text-white active:bg-pink-600 font-bold uppercase px-8 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  <i class="fas fa-heart"></i>
</button>

Round with text

Choose to go with a basic more rounded button.

<button class="text-pink-500 border border-pink-500 hover:bg-pink-500 hover:text-white active:bg-pink-600 font-bold uppercase px-8 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  Large
</button>

Round with icon and text

Or, you can go with an icon alongside your text in the rounded button.

<button class="text-pink-500 border border-pink-500 hover:bg-pink-500 hover:text-white active:bg-pink-600 font-bold uppercase px-8 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  <i class="fas fa-heart"></i> Large
</button>

Round with icons

Icons are enough so your users will know what the rounded button does.

<button class="text-pink-500 border border-pink-500 hover:bg-pink-500 hover:text-white active:bg-pink-600 font-bold uppercase px-8 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  <i class="fas fa-heart"></i>
</button>