Tailwind CSS Social Buttons - Notus JS
-
Pro Component
Pure Tailwind CSS social buttons with plenty of examples. Also, easy
to extend or add new brands.
Examples
Filled
Only Text
Choose this basic button, only with text.
<button class="bg-facebook-regular text-white active:bg-facebook-active 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>
<button class="bg-facebook-regular text-white active:bg-facebook-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-facebook-regular text-white active:bg-facebook-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-twitter-regular text-white active:bg-twitter-active 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>
<button class="bg-twitter-regular text-white active:bg-twitter-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-twitter-regular text-white active:bg-twitter-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-instagram-regular text-white active:bg-instagram-active 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>
<button class="bg-instagram-regular text-white active:bg-instagram-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-instagram-regular text-white active:bg-instagram-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-github-regular text-white active:bg-github-active 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>
<button class="bg-github-regular text-white active:bg-github-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-github-regular text-white active:bg-github-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active 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>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-youtube-regular text-white active:bg-youtube-active 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>
<button class="bg-youtube-regular text-white active:bg-youtube-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-youtube-regular text-white active:bg-youtube-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active 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>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-slack-regular text-white active:bg-slack-active 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>
<button class="bg-slack-regular text-white active:bg-slack-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-slack-regular text-white active:bg-slack-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active 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>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-reddit-regular text-white active:bg-reddit-active 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>
<button class="bg-reddit-regular text-white active:bg-reddit-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-reddit-regular text-white active:bg-reddit-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active 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>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active 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>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg 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="bg-facebook-regular text-white active:bg-facebook-active 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>
<button class="bg-facebook-regular text-white active:bg-facebook-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-facebook-regular text-white active:bg-facebook-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg 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>
<button class="bg-twitter-regular text-white active:bg-twitter-active 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>
<button class="bg-twitter-regular text-white active:bg-twitter-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-twitter-regular text-white active:bg-twitter-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg 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>
<button class="bg-instagram-regular text-white active:bg-instagram-active 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>
<button class="bg-instagram-regular text-white active:bg-instagram-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-instagram-regular text-white active:bg-instagram-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg 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>
<button class="bg-github-regular text-white active:bg-github-active 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>
<button class="bg-github-regular text-white active:bg-github-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-github-regular text-white active:bg-github-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg 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>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active 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>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg 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>
<button class="bg-youtube-regular text-white active:bg-youtube-active 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>
<button class="bg-youtube-regular text-white active:bg-youtube-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-youtube-regular text-white active:bg-youtube-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg 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>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active 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>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg 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>
<button class="bg-slack-regular text-white active:bg-slack-active 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>
<button class="bg-slack-regular text-white active:bg-slack-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-slack-regular text-white active:bg-slack-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg 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>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active 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>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg 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>
<button class="bg-reddit-regular text-white active:bg-reddit-active 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>
<button class="bg-reddit-regular text-white active:bg-reddit-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-reddit-regular text-white active:bg-reddit-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg 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>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active 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>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg 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>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active 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>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg 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="bg-facebook-regular text-white active:bg-facebook-active 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>
<button class="bg-facebook-regular text-white active:bg-facebook-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-facebook-regular text-white active:bg-facebook-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-twitter-regular text-white active:bg-twitter-active 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>
<button class="bg-twitter-regular text-white active:bg-twitter-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-twitter-regular text-white active:bg-twitter-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-instagram-regular text-white active:bg-instagram-active 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>
<button class="bg-instagram-regular text-white active:bg-instagram-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-instagram-regular text-white active:bg-instagram-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-github-regular text-white active:bg-github-active 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>
<button class="bg-github-regular text-white active:bg-github-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-github-regular text-white active:bg-github-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active 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>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-youtube-regular text-white active:bg-youtube-active 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>
<button class="bg-youtube-regular text-white active:bg-youtube-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-youtube-regular text-white active:bg-youtube-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active 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>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-slack-regular text-white active:bg-slack-active 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>
<button class="bg-slack-regular text-white active:bg-slack-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-slack-regular text-white active:bg-slack-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active 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>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-reddit-regular text-white active:bg-reddit-active 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>
<button class="bg-reddit-regular text-white active:bg-reddit-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-reddit-regular text-white active:bg-reddit-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active 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>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active 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>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
</button>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg 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-facebook-regular text-white active:bg-facebook-active 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>
<button class="bg-facebook-regular text-white active:bg-facebook-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-facebook-regular text-white active:bg-facebook-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-twitter-regular text-white active:bg-twitter-active 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>
<button class="bg-twitter-regular text-white active:bg-twitter-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-twitter-regular text-white active:bg-twitter-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-instagram-regular text-white active:bg-instagram-active 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>
<button class="bg-instagram-regular text-white active:bg-instagram-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-instagram-regular text-white active:bg-instagram-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-github-regular text-white active:bg-github-active 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>
<button class="bg-github-regular text-white active:bg-github-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-github-regular text-white active:bg-github-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active 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>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-youtube-regular text-white active:bg-youtube-active 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>
<button class="bg-youtube-regular text-white active:bg-youtube-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-youtube-regular text-white active:bg-youtube-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active 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>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-slack-regular text-white active:bg-slack-active 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>
<button class="bg-slack-regular text-white active:bg-slack-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-slack-regular text-white active:bg-slack-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active 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>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-reddit-regular text-white active:bg-reddit-active 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>
<button class="bg-reddit-regular text-white active:bg-reddit-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-reddit-regular text-white active:bg-reddit-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active 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>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Large
</button>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active 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>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg 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="bg-facebook-regular text-white active:bg-facebook-active 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>
<button class="bg-facebook-regular text-white active:bg-facebook-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-facebook-regular text-white active:bg-facebook-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg 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>
<button class="bg-twitter-regular text-white active:bg-twitter-active 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>
<button class="bg-twitter-regular text-white active:bg-twitter-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-twitter-regular text-white active:bg-twitter-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg 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>
<button class="bg-instagram-regular text-white active:bg-instagram-active 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>
<button class="bg-instagram-regular text-white active:bg-instagram-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-instagram-regular text-white active:bg-instagram-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg 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>
<button class="bg-github-regular text-white active:bg-github-active 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>
<button class="bg-github-regular text-white active:bg-github-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-github-regular text-white active:bg-github-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg 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>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active 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>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg 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>
<button class="bg-youtube-regular text-white active:bg-youtube-active 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>
<button class="bg-youtube-regular text-white active:bg-youtube-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-youtube-regular text-white active:bg-youtube-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg 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>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active 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>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg 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>
<button class="bg-slack-regular text-white active:bg-slack-active 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>
<button class="bg-slack-regular text-white active:bg-slack-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-slack-regular text-white active:bg-slack-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg 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>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active 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>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg 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>
<button class="bg-reddit-regular text-white active:bg-reddit-active 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>
<button class="bg-reddit-regular text-white active:bg-reddit-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-reddit-regular text-white active:bg-reddit-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg 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>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active 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>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg 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>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active 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>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i> Regular
</button>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg 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="bg-facebook-regular text-white active:bg-facebook-active 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 class="bg-facebook-regular text-white active:bg-facebook-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-facebook-regular text-white active:bg-facebook-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-twitter-regular text-white active:bg-twitter-active 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 class="bg-twitter-regular text-white active:bg-twitter-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-twitter-regular text-white active:bg-twitter-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-instagram-regular text-white active:bg-instagram-active 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 class="bg-instagram-regular text-white active:bg-instagram-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-instagram-regular text-white active:bg-instagram-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-github-regular text-white active:bg-github-active 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 class="bg-github-regular text-white active:bg-github-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-github-regular text-white active:bg-github-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active 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 class="bg-pinterest-regular text-white active:bg-pinterest-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-pinterest-regular text-white active:bg-pinterest-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-youtube-regular text-white active:bg-youtube-active 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 class="bg-youtube-regular text-white active:bg-youtube-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-youtube-regular text-white active:bg-youtube-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active 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 class="bg-vimeo-regular text-white active:bg-vimeo-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-vimeo-regular text-white active:bg-vimeo-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-slack-regular text-white active:bg-slack-active 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 class="bg-slack-regular text-white active:bg-slack-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-slack-regular text-white active:bg-slack-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active 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 class="bg-dribbble-regular text-white active:bg-dribbble-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-dribbble-regular text-white active:bg-dribbble-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-reddit-regular text-white active:bg-reddit-active 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 class="bg-reddit-regular text-white active:bg-reddit-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-reddit-regular text-white active:bg-reddit-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active 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 class="bg-tumblr-regular text-white active:bg-tumblr-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-tumblr-regular text-white active:bg-tumblr-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active 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 class="bg-linkedin-regular text-white active:bg-linkedin-active font-bold uppercase text-sm px-6 py-3 rounded-full shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
<button class="bg-linkedin-regular text-white active:bg-linkedin-active font-bold uppercase text-base px-8 py-3 rounded-full shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
<i class="fas fa-heart"></i>
Outline
Only Text
Choose this basic button, only with text.
<button class="text-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active font-bold uppercase text-xs px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active 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>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active font-bold uppercase text-xs px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active 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>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active font-bold uppercase text-xs px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active 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>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active font-bold uppercase text-xs px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active 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>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active font-bold uppercase text-xs px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active 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>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active font-bold uppercase text-xs px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active 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>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active font-bold uppercase text-xs px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active 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>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active font-bold uppercase text-xs px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active 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>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active font-bold uppercase text-xs px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active 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>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active font-bold uppercase text-xs px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active 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>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active font-bold uppercase text-xs px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active 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>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active font-bold uppercase text-xs px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active 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-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active font-bold uppercase text-xs px-4 py-2 rounded 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>
<button class="text-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active 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>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active font-bold uppercase text-xs px-4 py-2 rounded 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>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active 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>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active font-bold uppercase text-xs px-4 py-2 rounded 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>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active 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>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active font-bold uppercase text-xs px-4 py-2 rounded 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>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active 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>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active font-bold uppercase text-xs px-4 py-2 rounded 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>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active 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>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active font-bold uppercase text-xs px-4 py-2 rounded 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>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active 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>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active font-bold uppercase text-xs px-4 py-2 rounded 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>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active 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>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active font-bold uppercase text-xs px-4 py-2 rounded 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>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active 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>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active font-bold uppercase text-xs px-4 py-2 rounded 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>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active 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>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active font-bold uppercase text-xs px-4 py-2 rounded 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>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active 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>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active font-bold uppercase text-xs px-4 py-2 rounded 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>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active 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>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active font-bold uppercase text-xs px-4 py-2 rounded 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>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active 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-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active font-bold uppercase text-sm px-6 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>
<button class="text-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active 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>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active font-bold uppercase text-sm px-6 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>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active 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>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active font-bold uppercase text-sm px-6 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>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active 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>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active font-bold uppercase text-sm px-6 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>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active 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>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active font-bold uppercase text-sm px-6 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>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active 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>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active font-bold uppercase text-sm px-6 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>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active 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>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active font-bold uppercase text-sm px-6 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>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active 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>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active font-bold uppercase text-sm px-6 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>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active 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>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active font-bold uppercase text-sm px-6 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>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active 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>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active font-bold uppercase text-sm px-6 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>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active 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>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active font-bold uppercase text-sm px-6 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>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active 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>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active font-bold uppercase text-sm px-6 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>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active 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-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active font-bold uppercase text-xs px-4 py-2 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active font-bold uppercase text-sm px-6 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active 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>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active font-bold uppercase text-xs px-4 py-2 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active font-bold uppercase text-sm px-6 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active 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>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active font-bold uppercase text-xs px-4 py-2 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active font-bold uppercase text-sm px-6 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active 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>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active font-bold uppercase text-xs px-4 py-2 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active font-bold uppercase text-sm px-6 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active 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>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active font-bold uppercase text-xs px-4 py-2 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active font-bold uppercase text-sm px-6 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active 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>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active font-bold uppercase text-xs px-4 py-2 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active font-bold uppercase text-sm px-6 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active 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>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active font-bold uppercase text-xs px-4 py-2 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active font-bold uppercase text-sm px-6 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active 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>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active font-bold uppercase text-xs px-4 py-2 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active font-bold uppercase text-sm px-6 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active 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>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active font-bold uppercase text-xs px-4 py-2 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active font-bold uppercase text-sm px-6 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active 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>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active font-bold uppercase text-xs px-4 py-2 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active font-bold uppercase text-sm px-6 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active 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>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active font-bold uppercase text-xs px-4 py-2 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active font-bold uppercase text-sm px-6 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active 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>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active font-bold uppercase text-xs px-4 py-2 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Small
</button>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active font-bold uppercase text-sm px-6 py-3 rounded-full outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
Regular
</button>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active 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-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active font-bold uppercase text-xs px-4 py-2 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> Small
</button>
<button class="text-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active 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>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active font-bold uppercase text-xs px-4 py-2 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> Small
</button>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active 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>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active font-bold uppercase text-xs px-4 py-2 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> Small
</button>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active 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>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active font-bold uppercase text-xs px-4 py-2 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> Small
</button>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active 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>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active font-bold uppercase text-xs px-4 py-2 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> Small
</button>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active 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>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active font-bold uppercase text-xs px-4 py-2 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> Small
</button>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active 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>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active font-bold uppercase text-xs px-4 py-2 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> Small
</button>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active 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>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active font-bold uppercase text-xs px-4 py-2 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> Small
</button>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active 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>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active font-bold uppercase text-xs px-4 py-2 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> Small
</button>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active 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>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active font-bold uppercase text-xs px-4 py-2 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> Small
</button>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active 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>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active font-bold uppercase text-xs px-4 py-2 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> Small
</button>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active 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>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active font-bold uppercase text-xs px-4 py-2 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> Small
</button>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active font-bold uppercase text-sm px-6 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> Regular
</button>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active 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-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active font-bold uppercase text-sm px-6 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>
<button class="text-facebook-regular bg-transparent border border-solid border-facebook-regular hover:bg-facebook-regular hover:text-white active:bg-facebook-active 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>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active font-bold uppercase text-sm px-6 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>
<button class="text-twitter-regular bg-transparent border border-solid border-twitter-regular hover:bg-twitter-regular hover:text-white active:bg-twitter-active 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>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active font-bold uppercase text-sm px-6 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>
<button class="text-instagram-regular bg-transparent border border-solid border-instagram-regular hover:bg-instagram-regular hover:text-white active:bg-instagram-active 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>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active font-bold uppercase text-sm px-6 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>
<button class="text-github-regular bg-transparent border border-solid border-github-regular hover:bg-github-regular hover:text-white active:bg-github-active 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>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active font-bold uppercase text-sm px-6 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>
<button class="text-pinterest-regular bg-transparent border border-solid border-pinterest-regular hover:bg-pinterest-regular hover:text-white active:bg-pinterest-active 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>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active font-bold uppercase text-sm px-6 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>
<button class="text-youtube-regular bg-transparent border border-solid border-youtube-regular hover:bg-youtube-regular hover:text-white active:bg-youtube-active 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>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active font-bold uppercase text-sm px-6 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>
<button class="text-vimeo-regular bg-transparent border border-solid border-vimeo-regular hover:bg-vimeo-regular hover:text-white active:bg-vimeo-active 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>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active font-bold uppercase text-sm px-6 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>
<button class="text-slack-regular bg-transparent border border-solid border-slack-regular hover:bg-slack-regular hover:text-white active:bg-slack-active 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>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active font-bold uppercase text-sm px-6 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>
<button class="text-dribbble-regular bg-transparent border border-solid border-dribbble-regular hover:bg-dribbble-regular hover:text-white active:bg-dribbble-active 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>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active font-bold uppercase text-sm px-6 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>
<button class="text-reddit-regular bg-transparent border border-solid border-reddit-regular hover:bg-reddit-regular hover:text-white active:bg-reddit-active 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>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active font-bold uppercase text-sm px-6 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>
<button class="text-tumblr-regular bg-transparent border border-solid border-tumblr-regular hover:bg-tumblr-regular hover:text-white active:bg-tumblr-active 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>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active font-bold uppercase text-xs px-4 py-2 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>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active font-bold uppercase text-sm px-6 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>
<button class="text-linkedin-regular bg-transparent border border-solid border-linkedin-regular hover:bg-linkedin-regular hover:text-white active:bg-linkedin-active 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>
Links
The bellow examples are made with button tags, but you can feel free
to change them with anchor (<a>) tags as well.
Small with text
Choose this basic link, only with text.
<button class="text-facebook-regular 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>
<button class="text-twitter-regular 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>
<button class="text-instagram-regular 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>
<button class="text-github-regular 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>
<button class="text-pinterest-regular 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>
<button class="text-youtube-regular 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>
<button class="text-vimeo-regular 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>
<button class="text-slack-regular 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>
<button class="text-dribbble-regular 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>
<button class="text-reddit-regular 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>
<button class="text-tumblr-regular 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>
<button class="text-linkedin-regular 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-facebook-regular 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>
<button class="text-twitter-regular 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>
<button class="text-instagram-regular 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>
<button class="text-github-regular 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>
<button class="text-pinterest-regular 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>
<button class="text-youtube-regular 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>
<button class="text-vimeo-regular 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>
<button class="text-slack-regular 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>
<button class="text-dribbble-regular 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>
<button class="text-reddit-regular 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>
<button class="text-tumblr-regular 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>
<button class="text-linkedin-regular 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-facebook-regular 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>
<button class="text-twitter-regular 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>
<button class="text-instagram-regular 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>
<button class="text-github-regular 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>
<button class="text-pinterest-regular 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>
<button class="text-youtube-regular 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>
<button class="text-vimeo-regular 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>
<button class="text-slack-regular 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>
<button class="text-dribbble-regular 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>
<button class="text-reddit-regular 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>
<button class="text-tumblr-regular 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>
<button class="text-linkedin-regular 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-facebook-regular 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>
<button class="text-twitter-regular 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>
<button class="text-instagram-regular 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>
<button class="text-github-regular 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>
<button class="text-pinterest-regular 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>
<button class="text-youtube-regular 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>
<button class="text-vimeo-regular 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>
<button class="text-slack-regular 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>
<button class="text-dribbble-regular 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>
<button class="text-reddit-regular 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>
<button class="text-tumblr-regular 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>
<button class="text-linkedin-regular 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-facebook-regular 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>
<button class="text-twitter-regular 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>
<button class="text-instagram-regular 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>
<button class="text-github-regular 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>
<button class="text-pinterest-regular 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>
<button class="text-youtube-regular 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>
<button class="text-vimeo-regular 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>
<button class="text-slack-regular 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>
<button class="text-dribbble-regular 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>
<button class="text-reddit-regular 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>
<button class="text-tumblr-regular 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>
<button class="text-linkedin-regular 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-facebook-regular 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>
<button class="text-twitter-regular 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>
<button class="text-instagram-regular 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>
<button class="text-github-regular 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>
<button class="text-pinterest-regular 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>
<button class="text-youtube-regular 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>
<button class="text-vimeo-regular 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>
<button class="text-slack-regular 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>
<button class="text-dribbble-regular 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>
<button class="text-reddit-regular 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>
<button class="text-tumblr-regular 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>
<button class="text-linkedin-regular 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-facebook-regular 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>
<button class="text-twitter-regular 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>
<button class="text-instagram-regular 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>
<button class="text-github-regular 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>
<button class="text-pinterest-regular 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>
<button class="text-youtube-regular 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>
<button class="text-vimeo-regular 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>
<button class="text-slack-regular 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>
<button class="text-dribbble-regular 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>
<button class="text-reddit-regular 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>
<button class="text-tumblr-regular 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>
<button class="text-linkedin-regular 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-facebook-regular 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>
<button class="text-twitter-regular 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>
<button class="text-instagram-regular 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>
<button class="text-github-regular 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>
<button class="text-pinterest-regular 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>
<button class="text-youtube-regular 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>
<button class="text-vimeo-regular 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>
<button class="text-slack-regular 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>
<button class="text-dribbble-regular 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>
<button class="text-reddit-regular 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>
<button class="text-tumblr-regular 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>
<button class="text-linkedin-regular 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-facebook-regular 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>
<button class="text-twitter-regular 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>
<button class="text-instagram-regular 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>
<button class="text-github-regular 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>
<button class="text-pinterest-regular 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>
<button class="text-youtube-regular 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>
<button class="text-vimeo-regular 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>
<button class="text-slack-regular 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>
<button class="text-dribbble-regular 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>
<button class="text-reddit-regular 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>
<button class="text-tumblr-regular 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>
<button class="text-linkedin-regular 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>