Link Buttons

Link buttons in different styles and colors can be used for call to actions in forms and more, or as simple links inside a blog post for example.

Small with text

Choose this basic link, only with text.

<button class="text-pink-500 background-transparent font-bold uppercase px-3 py-1 text-xs outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  With Text
</button>

Small Icon and Text

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

<button class="text-pink-500 background-transparent font-bold uppercase px-3 py-1 text-xs outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  <i class="fas fa-heart"></i> With Icon and Text
</button>

Small Icon

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

<button class="text-pink-500 background-transparent font-bold uppercase px-3 py-1 text-xs outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  <i class="fas fa-heart"></i>
</button>

Regular with text

Choose this basic link, only with text.

<button class="text-pink-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  With Text
</button>

Regular Icon and Text

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

<button class="text-pink-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  <i class="fas fa-heart"></i> With Icon and Text
</button>

Just Icon

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

<button class="text-pink-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  <i class="fas fa-heart"></i>
</button>

Large with text

Choose this basic link, only with text.

<button class="text-pink-500 background-transparent font-bold uppercase px-8 py-3 outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  With Text
</button>

Large Icon and Text

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

<button class="text-pink-500 background-transparent font-bold uppercase px-8 py-3 outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
      >
  <i class="fas fa-heart"></i> With Icon and Text
</button>

Just Icon

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

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