DEV Community

Cover image for 7 Spicy Tailwind CSS Buttons
Weston Walker ๐Ÿ“š
Weston Walker ๐Ÿ“š

Posted on โ€ข Originally published at thefullstackdev.net

4

7 Spicy Tailwind CSS Buttons

Buttons. Ahhh boring buttons. The most basic element we love to neglect. But buttons don't have to be boring. Here are 7 spicy button designs using Tailwind CSS.

1) Icon

Adding an icon to a button is a nice cherry on top of it's design and can add some context for its intended action.
Tailwind icon button

2) Solid

Standard button to draw a userโ€™s attention to action. Great for primary actions.
Tailwind solid button

3) Outlined

Draws attention but not to much. Great for secondary actions.
Tailwind outlined button

4) Dark & Square

Square buttons should only be used if the rest of your design is lacking border radiuses. Usually meant for a more business-like theme.
Tailwind dark button

5) Fully Rounded

A fully rounded button is meant for more light-hearted designs. Again, if your using rounded buttons, keep the rest of your design consistent with it.
Tailwind rounded button

6) Raised

Raised buttons give depth to the page and make the element appear closer to the user, giving it a sense of purpose.
Tailwind raised button

7) Smooth

Smooth buttons are great for secondary actions. Their designs don't draw as much attention as a solid primary button.
Tailwind smooth button

Beautiful Tailwind CSS Landing Pages

If you enjoyed this, consider checking out my new project - Tailwind Sites

There you will find Expertly crafted Tailwind CSS landing pages. Get a head start on your next big idea. Beautifully designed. Expertly coded.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, weโ€™ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, weโ€™ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (1)

Collapse
 
guruphem profile image
Guruphem ๎จ€ โ€ข

Nice content, Weston

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit