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. 2) Standard Standard button to draw a user’s attention to action. Great for primary actions. 3) Outlined Draws attention but not to much. Great for secondary actions. 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. 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. 6) Raised Raised buttons give depth to the page and make the element appear closer to the user, giving it a sense of purpose. 7) Smooth Smooth buttons are great for secondary actions. Their designs don't draw as much attention as a solid primary button. Also published here. 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.

5 Essential Bootstrap CSS Components and How to Improve Their Design

I simplify complex topics - like development and design - and cure your imposter syndrome.

.NET remote job board

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Too Long; Didn't Read

Make resilience your competitive advantage

7 Fun Tailwind CSS Button Designs to Improve Your Workflow

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Essential Bootstrap CSS Components and How to Improve Their Design

19 Apps and Websites All Student Developers Should Check Out

A Hack That Replicates Self, Mines Crypto Without CPU/GPU

AppOps with Kubernetes and Devtron: The Perfect Fit

AppOps with Kubernetes and Devtron: The Perfect Fit

5 Essential Bootstrap CSS Components and How to Improve Their Design

19 Apps and Websites All Student Developers Should Check Out

A Hack That Replicates Self, Mines Crypto Without CPU/GPU

AppOps with Kubernetes and Devtron: The Perfect Fit

AppOps with Kubernetes and Devtron: The Perfect Fit

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps