Create a button component with tailwindcss

Button has been a component that sometime can be easy to create and also a bit tricky at the same time. Today we will learn some interesting challenge to create button component with tailwindcss.

Here's example button design we will create:

Define base color

Let's start with create base color.

The button layer

Basically the button consist of several layers.

1. Background - gradient background.
2. Shadow inside - gradient background.
3. Ring outside - solid color.

The rest is icon, text and label.

Layers

Let's start with background.

<button
  class="bg-gradient-to-b from-[#4FDFC3] via-[#2DD9B7] to-[#07D3AA] p-2 rounded-[10px] text-white"
>
  New item
</button>

Here is the result:

New item

Now add ring outside.

<button
  class="bg-gradient-to-b from-[#4FDFC3] via-[#2DD9B7] to-[#07D3AA] p-2 rounded-[10px] ring ring-[#03BE99]"
>
  New item
</button>

New item

Add shadow inside, to make it in css to make it easier to read the code.

.shadow-inside::before {
  @apply bg-gradient-to-b from-[#04D2A9] via-[#06D1A9] to-[#06D1A9];
}

<button
  class="relative bg-gradient-to-b from-[#4FDFC3] via-[#2DD9B7] to-[#07D3AA] p-2 rounded-[10px] ring ring-[#03BE99] shadow-inside before:absolute before:inset-[2px] before:rounded-[10px]"
>
  New item
</button>

And here's the result:

New item

But we got someting weird thing happen, the text is gone. To fix that let's do this:

• add display flex
• wrap text with span element
• add zindex to the text

<button
  class="relative inline-flex bg-gradient-to-b from-[#4FDFC3] via-[#2DD9B7] to-[#07D3AA] p-2 rounded-[10px] ring ring-[#03BE99] shadow-inside before:absolute before:inset-[2px] before:rounded-[10px]"
>
  <span class="z-10 text-white">New item</span>
</button>

And that's it we got our very complex button. Grab the complete code here:

https://play.tailwindcss.com/61qOwa7HTh