Small Filled Buttons

Small filled buttons in different styles and colors can be used for call to actions in forms and more.

Only Text

Choose this basic button, only with text.

<button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  Small
</button>

Icon and Text

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

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

Just Icon

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

<button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md 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="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-xs px-4 py-2 rounded-full shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  Small
</button>

Round with icon and text

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

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

Round with icons

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

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