CODEWITHSUNDEEP
htmlcsstailwind-css
Adam Lau
Adam Lau

Reputation: 183

Can I achieve an underlined button on hover with Tailwind CSS?

I'm beginning to learn Tailwind CSS and am trying to implement the button below. It's a blank button that highlights its bottom border on hover.

enter image description here

However, scanning through the docs, I can't seem to be able to recreate the effects.

Upvotes: 4

Views: 8832

Answers (3)

ptts
ptts

Reputation: 2086

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex items-center justify-center min-h-screen">
  <button class="text-6xl font-bold transition duration-150 border-b-8 border-transparent hover:border-purple-500">
    Button
  </button>
</div>

Upvotes: 8

Gwen Tsao
Gwen Tsao

Reputation: 91

You can use transition class. and check the transition documents in https://tailwindcss.com/docs/transition-property

Upvotes: 0

user633440
user633440

Reputation:

First, add the following to your tailwind.config.js.

module.exports = {
    variants: {
        extend: {
            // ...
           borderStyle: ['hover'],
        }
    }
}

Then use the following utilities to create the button.

<button class="p-4 font-bold font-sans border-b-2 border-double 
    border-transparent hover:border-current cursor-pointer select-none">
    Button
</button>

Finally, run npm run prod.

Upvotes: 1

Related Questions