DocumentationHover Effects

Background Effects

New

Background Hover Effects

Copy and Paste the Code

Use the following example to add hover effects to your components:

Example

Effect 1

Hover Me

<Link
  href="#"
  className="no-underline relative group text-base hover:dark:text-sky-400 hover:text-sky-600 text-gray-600 dark:text-gray-400"
>
  Hover Me
  <span className="absolute -bottom-1 left-0 w-full h-[2px] bg-sky-600 dark:bg-sky-500 rounded transition-transform origin-right scale-x-0 group-hover:origin-left group-hover:scale-x-100 duration-300 ease-in-out"></span>
</Link>

Effect 2

Hover Me

<Link
  href="#"
  class="relative inline-block px-1 -mx-1 text-sky-700 dark:text-sky-500 dark:hover:text-white hover:text-white font-bold text-[27px] leading-[1.5] no-underline shadow-[inset_0_0_0_0_#04bbff] transition-all duration-300 ease-in-out hover:text-white hover:shadow-[inset_200px_0_0_0_#04bbff]"
>
  Hover Me
</Link>

Underline Effects

New