Lazydev

BETA

Docs

Buttons

Types

The most commonly used button styles.

Show code

<button
  type="button"
  className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
  text-blue-600 hover:-translate-y-0.5 active:translate-y-0 shadow-blue-100 hover:shadow-blue-300
  bg-blue-600 hover:bg-blue-500 dark:bg-blue-600 text-white">
  Solid
</button>
<button
  type="button"
  className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
  text-blue-600 hover:-translate-y-0.5 active:translate-y-0 bg-transparent dark:bg-transparent
  hover:bg-blue-600 border-2 border-blue-300 hover:border-blue-600 dark:border-blue-600
  dark:hover:border-blue-600 text-blue-600 hover:text-white dark:text-blue-600
  dark:hover:bg-blue-600 dark:hover:text-white">
  Outline
</button>
<button
  type="button"
  className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
  text-blue-600 hover:-translate-y-0.5 active:translate-y-0 hover:shadow-blue-300 duration-200
  bg-transparent hover:bg-blue-100 dark:bg-transparent dark:hover:bg-blue-100 text-blue-600">
  Ghost
</button>
<button
  type="button"
  className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
  text-blue-600 hover:-translate-y-0.5 active:translate-y-0 hover:shadow-blue-300 duration-200
  bg-transparent bg-blue-100 hover:bg-blue-600 dark:bg-blue-100 dark:hover:bg-blue-600
  dark:hover:text-white text-blue-600 hover:text-white">
  Soft
</button>
<button
  type="button"
  className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
  text-blue-600 hover:-translate-y-0.5 active:translate-y-0 bg-transparent dark:bg-transparent
  border-2 border-blue-300 hover:border-blue-600 dark:border-gray-600 dark:hover:border-gray-500
  text-blue-600 dark:text-white">
  White
</button>
<button
  type="button"
  className="hover:underline text-xs md:text-sm rounded-xl py-2 px-4 md:py-3 md:px-6 bg-transparent text-blue-600
  active:text-blue-400">
  Link
</button>

Rounded

Use the `.rounded-full` utility class to make buttons circular.

Show code

<button
  type="button"
  className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
  text-blue-600 hover:-translate-y-0.5 active:translate-y-0 shadow-blue-100 hover:shadow-blue-300
  bg-blue-600 hover:bg-blue-500 dark:bg-blue-600 text-white">
  Solid
</button>
<button
  type="button"
  className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
  text-blue-600 hover:-translate-y-0.5 active:translate-y-0 bg-transparent dark:bg-transparent
  hover:bg-blue-600 border-2 border-blue-300 hover:border-blue-600 dark:border-blue-600
  dark:hover:border-blue-600 text-blue-600 hover:text-white dark:text-blue-600
  dark:hover:bg-blue-600 dark:hover:text-white">
  Outline
</button>
<button
  type="button"
  className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
  text-blue-600 hover:-translate-y-0.5 active:translate-y-0 hover:shadow-blue-300 duration-200
  bg-transparent hover:bg-blue-100 dark:bg-transparent dark:hover:bg-blue-100 text-blue-600">
  Ghost
</button>
<button
  type="button"
  className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
  text-blue-600 hover:-translate-y-0.5 active:translate-y-0 hover:shadow-blue-300 duration-200
  bg-transparent bg-blue-100 hover:bg-blue-600 dark:bg-blue-100 dark:hover:bg-blue-600
  dark:hover:text-white text-blue-600 hover:text-white">
  Soft
</button>
<button
  type="button"
  className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
  text-blue-600 hover:-translate-y-0.5 active:translate-y-0 bg-transparent dark:bg-transparent
  border-2 border-blue-300 hover:border-blue-600 dark:border-gray-600 dark:hover:border-gray-500
  text-blue-600 dark:text-white">
  White
</button>
<button
  type="button"
  className="hover:underline text-xs md:text-sm py-2 px-4 md:py-3 md:px-6 bg-transparent text-blue-600
  active:text-blue-400">
  Link
</button>

Solid color variants

Predefined solid color button styles.

Show code

    <button
      type="button"
      className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
  text-blue-600 hover:-translate-y-0.5 active:translate-y-0
  shadow-blue-100 hover:shadow-blue-300 bg-blue-600 hover:bg-blue-500
      dark:bg-blue-600 text-white mx-1 md:mx-2 my-1 md:my-2">
      Blue
    </button>
    <button
      type="button"
      className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
      hover:-translate-y-0.5 active:translate-y-0
      shadow-teal-100 hover:shadow-teal-300 bg-teal-600 hover:bg-teal-500
      dark:bg-teal-600 text-white mx-1 md:mx-2 my-1 md:my-2">
      Teal
    </button>
    <button
      type="button"
      className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
      hover:-translate-y-0.5 active:translate-y-0
      shadow-rose-100 hover:shadow-rose-300 bg-rose-600 hover:bg-rose-500
      dark:bg-rose-600 text-white mx-1 md:mx-2 my-1 md:my-2">
      Rose
    </button>
    <button
      type="button"
      className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
      hover:-translate-y-0.5 active:translate-y-0
      shadow-fuchsia-100 hover:shadow-fuchsia-300 bg-fuchsia-600 hover:bg-fuchsia-500
      dark:bg-fuchsia-600 text-white mx-1 md:mx-2 my-1 md:my-2">
      Fuchsia
    </button>
    <button
      type="button"
      className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
      hover:-translate-y-0.5 active:translate-y-0
      shadow-yellow-100 hover:shadow-yellow-300 bg-yellow-600 hover:bg-yellow-500
      dark:bg-yellow-600 text-white mx-1 md:mx-2 my-1 md:my-2">
      Yellow
    </button>
    <button
      type="button"
      className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
      hover:-translate-y-0.5 active:translate-y-0
      shadow-indigo-100 hover:shadow-indigo-300 bg-indigo-600 hover:bg-indigo-500
      dark:bg-indigo-600 text-white mx-1 md:mx-2 my-1 md:my-2">
      Indigo
    </button>
    <button
      type="button"
      className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
      hover:-translate-y-0.5 active:translate-y-0
      shadow-orange-100 hover:shadow-orange-300 bg-orange-600 hover:bg-orange-500
      dark:bg-orange-600 text-white mx-1 md:mx-2 my-1 md:my-2">
      Orange
    </button>

Outline color variants

Predefined outline color button styles.

Show code

    <button
      type="button"
      className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
      hover:-translate-y-0.5 active:translate-y-0
      bg-transparent dark:bg-transparent hover:bg-blue-600 border-2 border-blue-300
      hover:border-blue-600 dark:border-blue-600 dark:hover:border-blue-600 text-blue-600 hover:text-white dark:text-blue-600 dark:hover:bg-blue-600 dark:hover:text-white mx-1 md:mx-2 my-1 md:my-2">
      Blue
    </button>
    <button
      type="button"
      className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
      hover:-translate-y-0.5 active:translate-y-0
      bg-transparent dark:bg-transparent hover:bg-teal-600 border-2 border-teal-300
      hover:border-teal-600 dark:border-teal-600 dark:hover:border-teal-600 text-teal-600 hover:text-white dark:text-teal-600 dark:hover:bg-teal-600 dark:hover:text-white mx-1 md:mx-2 my-1 md:my-2">
      Teal
    </button>
    <button
      type="button"
      className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
      hover:-translate-y-0.5 active:translate-y-0
      bg-transparent dark:bg-transparent hover:bg-rose-600 border-2 border-rose-300
      hover:border-rose-600 dark:border-rose-600 dark:hover:border-rose-600 text-rose-600 hover:text-white dark:text-rose-600 dark:hover:bg-rose-600 dark:hover:text-white mx-1 md:mx-2 my-1 md:my-2">
      Rose
    </button>
    <button
      type="button"
      className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
      hover:-translate-y-0.5 active:translate-y-0
      bg-transparent dark:bg-transparent hover:bg-fuchsia-600 border-2 border-fuchsia-300
      hover:border-fuchsia-600 dark:border-fuchsia-600 dark:hover:border-fuchsia-600 text-fuchsia-600 hover:text-white dark:text-fuchsia-600 dark:hover:bg-fuchsia-600 dark:hover:text-white mx-1 md:mx-2 my-1 md:my-2">
      Fuchsia
    </button>
    <button
      type="button"
      className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
      hover:-translate-y-0.5 active:translate-y-0
      bg-transparent dark:bg-transparent hover:bg-yellow-600 border-2 border-yellow-300
      hover:border-yellow-600 dark:border-yellow-600 dark:hover:border-yellow-600 text-yellow-600 hover:text-white dark:text-yellow-600 dark:hover:bg-yellow-600 dark:hover:text-white mx-1 md:mx-2 my-1 md:my-2">
      Yellow
    </button>
    <button
      type="button"
      className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
      hover:-translate-y-0.5 active:translate-y-0
      bg-transparent dark:bg-transparent hover:bg-indigo-600 border-2 border-indigo-300
      hover:border-indigo-600 dark:border-indigo-600 dark:hover:border-indigo-600 text-indigo-600 hover:text-white dark:text-indigo-600 dark:hover:bg-indigo-600 dark:hover:text-white mx-1 md:mx-2 my-1 md:my-2">
      Indigo
    </button>
    <button
      type="button"
      className="rounded-full py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200 font-medium
      hover:-translate-y-0.5 active:translate-y-0
      bg-transparent dark:bg-transparent hover:bg-orange-600 border-2 border-orange-300
      hover:border-orange-600 dark:border-orange-600 dark:hover:border-orange-600 text-orange-600 hover:text-white dark:text-orange-600 dark:hover:bg-orange-600 dark:hover:text-white mx-1 md:mx-2 my-1 md:my-2">
      Orange
    </button>

Ghost color variants

Predefined ghost color button styles.

Show code

    <button
      type="button"
      className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      hover:-translate-y-0.5 active:translate-y-0 hover:shadow-blue-300 duration-200 bg-transparent
      hover:bg-blue-100 dark:bg-transparent dark:hover:bg-blue-100 text-blue-600 mx-1 md:mx-2 my-1 md:my-2">
      Blue
    </button>
    <button
      type="button"
      className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      hover:-translate-y-0.5 active:translate-y-0 hover:shadow-teal-300 duration-200 bg-transparent
      hover:bg-teal-100 dark:bg-transparent dark:hover:bg-teal-100 text-teal-600 mx-1 md:mx-2 my-1 md:my-2">
      Teal
    </button>
    <button
      type="button"
      className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      hover:-translate-y-0.5 active:translate-y-0 hover:shadow-rose-300 duration-200 bg-transparent
      hover:bg-rose-100 dark:bg-transparent dark:hover:bg-rose-100 text-rose-600 mx-1 md:mx-2 my-1 md:my-2">
      Rose
    </button>
    <button
      type="button"
      className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      hover:-translate-y-0.5 active:translate-y-0 hover:shadow-fuchsia-300 duration-200 bg-transparent
      hover:bg-fuchsia-100 dark:bg-transparent dark:hover:bg-fuchsia-100 text-fuchsia-600 mx-1 md:mx-2 my-1 md:my-2">
      Fuchsia
    </button>
    <button
      type="button"
      className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      hover:-translate-y-0.5 active:translate-y-0 hover:shadow-yellow-300 duration-200 bg-transparent
      hover:bg-yellow-100 dark:bg-transparent dark:hover:bg-yellow-100 text-yellow-600 mx-1 md:mx-2 my-1 md:my-2">
      Yellow
    </button>
    <button
      type="button"
      className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      hover:-translate-y-0.5 active:translate-y-0 hover:shadow-indigo-300 duration-200 bg-transparent
      hover:bg-indigo-100 dark:bg-transparent dark:hover:bg-indigo-100 text-indigo-600 mx-1 md:mx-2 my-1 md:my-2">
      Indigo
    </button>
    <button
      type="button"
      className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      hover:-translate-y-0.5 active:translate-y-0 hover:shadow-orange-300 duration-200 bg-transparent
      hover:bg-orange-100 dark:bg-transparent dark:hover:bg-orange-100 text-orange-600 mx-1 md:mx-2 my-1 md:my-2">
      Orange
    </button>

Soft color variants

Predefined soft color button styles.

Show code

    <button
      type="button"
      className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      hover:-translate-y-0.5 active:translate-y-0 hover:shadow-blue-300 duration-200
      bg-transparent bg-blue-100 hover:bg-blue-600 dark:bg-blue-100 dark:hover:bg-blue-600
      dark:hover:text-white text-blue-600 hover:text-white mx-1 md:mx-2 my-1 md:my-2">
      Blue
    </button>
    <button
      type="button"
      className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      hover:-translate-y-0.5 active:translate-y-0 hover:shadow-teal-300 duration-200
      bg-transparent bg-teal-100 hover:bg-teal-600 dark:bg-teal-100
      dark:hover:bg-teal-600 dark:hover:text-white text-teal-600 hover:text-white mx-1
      md:mx-2 my-1 md:my-2">
      Teal
    </button>
    <button
      type="button"
      className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      hover:-translate-y-0.5 active:translate-y-0 hover:shadow-rose-300 duration-200
      bg-transparent bg-rose-100 hover:bg-rose-600 dark:bg-rose-100
      dark:hover:bg-rose-600 dark:hover:text-white text-rose-600 hover:text-white mx-1
      md:mx-2 my-1 md:my-2">
      Rose
    </button>
    <button
      type="button"
      className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      hover:-translate-y-0.5 active:translate-y-0 hover:shadow-fuchsia-300 duration-200
      bg-transparent bg-fuchsia-100 hover:bg-fuchsia-600 dark:bg-fuchsia-100
      dark:hover:bg-fuchsia-600 dark:hover:text-white text-fuchsia-600 hover:text-white
      mx-1 md:mx-2 my-1 md:my-2">
      Fuchsia
    </button>
    <button
      type="button"
      className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      hover:-translate-y-0.5 active:translate-y-0 hover:shadow-yellow-300 duration-200
      bg-transparent bg-yellow-100 hover:bg-yellow-600 dark:bg-yellow-100
      dark:hover:bg-yellow-600 dark:hover:text-white text-yellow-600 hover:text-white
      mx-1 md:mx-2 my-1 md:my-2">
      Yellow
    </button>
    <button
      type="button"
      className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      hover:-translate-y-0.5 active:translate-y-0 hover:shadow-indigo-300 duration-200
      bg-transparent bg-indigo-100 hover:bg-indigo-600 dark:bg-indigo-100
      dark:hover:bg-indigo-600 dark:hover:text-white text-indigo-600 hover:text-white
      mx-1 md:mx-2 my-1 md:my-2">
      Indigo
    </button>
    <button
      type="button"
      className="rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      hover:-translate-y-0.5 active:translate-y-0 hover:shadow-orange-300 duration-200
      bg-transparent bg-orange-100 hover:bg-orange-600 dark:bg-orange-100
      dark:hover:bg-orange-600 dark:hover:text-white text-orange-600 hover:text-white
      mx-1 md:mx-2 my-1 md:my-2">
      Orange
    </button>

Animations

Button hover animations.

Show code

      <button
        type="button"
        className="rounded-lg md:rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200
        font-medium hover:-translate-y-0.5 active:translate-y-0 shadow-blue-100 hover:shadow-blue-300
        bg-blue-600 hover:bg-blue-500 dark:bg-blue-600 text-white mx-1 md:mx-2 my-1 md:my-2">
        Jump
      </button>
      <button
        type="button"
        className="rounded-lg md:rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200
        font-medium hover:scale-105 active:scale-100 shadow-blue-100 hover:shadow-blue-300 bg-blue-600
        hover:bg-blue-500 dark:bg-blue-600 text-white mx-1 md:mx-2 my-1 md:my-2">
        Scale
      </button>
      <button
        type="button"
        className="rounded-lg md:rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm duration-200
        font-medium shadow-blue-100 hover:shadow-blue-300 bg-blue-600 hover:bg-blue-500 dark:bg-blue-600
        text-white mx-1 md:mx-2 my-1 md:my-2 btn-shine">
        Shine
      </button>

      .btn-shine {
      position: relative;
      overflow: hidden;
      }

      .btn-shine::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        transform: rotate(45deg);
        animation: none; /* Disable the animation by default */
        transition: opacity 0.3s ease-in-out; /* Add a transition for smooth effect */
      }

      .btn-shine:hover::before {
        animation: shine 1.5s infinite; /* Enable the animation on hover */
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.8),
          rgba(255, 255, 255, 0.5)
        );
      }

      @keyframes shine {
        0% {
          transform: translateX(-150%) rotate(45deg);
        }
        100% {
          transform: translateX(150%) rotate(45deg);
        }
      }

Block Button

.w-full or .grid classes will make the button fit to its parent width.

Show code

    <button
      type="button"
      className="w-full md:w-[18rem] xl:w-[22rem] rounded-lg md:rounded-xl py-2 px-4 md:py-3 
      md:px-6 text-xs md:text-sm duration-200 font-medium hover:-translate-y-0.5 active:translate-y-0
      shadow-blue-100 hover:shadow-blue-300 bg-blue-600 hover:bg-blue-500 dark:bg-blue-600 text-white">
      Sign up
    </button>
    <button
      type="button"
      className="w-full md:w-[18rem] xl:w-[22rem] flex items-center justify-center space-x-2
       rounded-lg md:rounded-xl py-2 px-4 md:py-3 md:px-6 duration-200 hover:-translate-y-0.5
       active:translate-y-0 shadow-blue-100 hover:shadow-blue-300 bg-gray-50 hover:bg-gray-100
       border-2 border-gray-100 dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700
       dark:hover:border-gray-500">
      <span>
        <svg
          width="20px"
          height="20px"
          viewBox="-3 0 262 262"
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="xMidYMid">
          <path
            d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
            fill="#4285F4"
          />
          <path
            d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
            fill="#34A853"
          />
          <path
            d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
            fill="#FBBC05"
          />
          <path
            d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
            fill="#EB4335"
          />
        </svg>
      </span>
      <span className="text-xs md:text-sm font-medium text-gray-900 dark:text-white">Continue with Google</span>
    </button>

Disabled

Make buttons look inactive by adding the disabled boolean attribute and .cursor-not-allowed class to any <button> element. <a>s don't support the disabled attribute.

Show code

    <button
      type="button"
      disabled
      className="rounded-lg md:rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm font-medium
      text-white bg-blue-600 enabled:hover:bg-blue-500 disabled:opacity-75
      disabled:cursor-not-allowed enabled:cursor-pointer disabled:select-none"
      >
      Disabled
    </button>
    <button
      type="button"
      disabled
      className="rounded-lg md:rounded-xl py-2 px-4 md:py-3 md:px-6 text-xs md:text-sm border font-medium
      bg-white text-gray-500 shadow-sm cursor-not-allowed dark:bg-gray-800
      dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 disabled:select-none">
      Disabled
    </button>

Gradient

Gradient button component

Coming soon

Show code

<div className="flex items-center space-x-3">
  <button className="text-white bg-gradient-to-br from-[#009FFD] to-[#2A2A72] hover:bg-gradient-to-bl font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb- active:scale-95 duration-300">
      Gradient
  </button>

  <button className="relative inline-flex items-center justify-center p-0.5 mb-0 mr-2 overflow-hidden text-sm font-medium text-[#1a5cff]     rounded-lg group bg-gradient-to-br from-[#009FFD] to-[#2A2A72] hover:text-white active:scale-95 duration-300">
    <span className="relative px-5 py-2 transition-all ease-in duration-200 bg-white rounded-md group-hover:bg-opacity-0">
        Gradient
    </span>
  </button>
</div>

Loading

Loading button component

Coming soon

Show code

<div className="flex items-center space-x-3">
  <button className="w-fit flex items-center space-x-2 mx-auto rounded-lg py-2 px-4 shadow-md text-sm active:bg-opacity-80 ease-in-out bg-[#1a5cff] dark:bg-[#1a5cff] md:text-sm active:scale-95 duration-200 text-white hover:shadow-md hover:shadow-blue-500/50">
    <div className="border-t-transparent w-[12px] h-[12px] border-[2px] border-white rounded-full animate-spin" />
    <p>Loading A</p>
  </button>
  <button className="w-fit flex items-center space-x-2 mx-auto rounded-lg py-2 px-4 shadow-md text-sm active:bg-opacity-80 ease-in-out bg-[#1a5cff] dark:bg-[#1a5cff] md:text-sm active:scale-95 duration-200 text-white hover:shadow-md hover:shadow-blue-500/50">
    <div className="border-t-transparent w-[12px] h-[12px] border-[2px] border-white border-dotted rounded-full animate-spin" />
    <p>Loading B</p>
  </button>
</div>

Subscribeto our Weekly Newsletter

Lazydev

About Lazy.dev

Why Lazy.dev?

FAQ

Resources

Documentation

GitHUb

Privacy

Help

Issues

FAQ

Team

.Soft Group

Created By Anvarov

Buttons

On this page

Types

Rounded

Solid color variants

Outline color variants

Ghost color variants

Soft color variants

Animations

Block Button

Disabled

Gradient

Coming soon

Loading

Coming soon

Subscribeto our Weekly Newsletter

Lazydev

Resources

Help

Team