button-5

• Vista previa

  SuccessWarningDangerInfo

• Código

  const Button5 = () => {
      return (
        <div className="flex flex-col lg:flex-row lg:items-center gap-5">
          <button className="relative py-2 px-6 text-center text-green-600 border border-green-600 overflow-hidden transition-all ease-in-out before:absolute before:bg-green-600 before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:-z-10 before:transition-all before:w-0 before:h-full hover:before:w-full hover:text-white">
            Success
          </button>
          <button className="relative py-2 px-6 text-center text-amber-600 border border-amber-600 overflow-hidden transition-all ease-in-out before:absolute before:bg-amber-600 before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:-z-10 before:transition-all before:w-0 before:h-full hover:before:w-full hover:text-white">
            Warning
          </button>
          <button className="relative py-2 px-6 text-center text-red-600 border border-red-600 overflow-hidden transition-all ease-in-out before:absolute before:bg-red-600 before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:-z-10 before:transition-all before:w-0 before:h-full hover:before:w-full hover:text-white">
            Danger
          </button>
          <button className="relative py-2 px-6 text-center text-sky-600 border border-sky-600 overflow-hidden transition-all ease-in-out before:absolute before:bg-sky-600 before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:-z-10 before:transition-all before:w-0 before:h-full hover:before:w-full hover:text-white">
            Info
          </button>
        </div>
      );
    };