button-4

• Vista previa

  SuccessWarningDangerInfo

• Código

  const Button4 = () => {
      return (
        <div className="flex flex-col lg:flex-row lg:items-center gap-5">
          <button className="py-2 px-6 text-center text-green-600 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:z-10 before:bg-green-500/10 before:transition-all hover:before:opacity-0 hover:before:scale-50 after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-10 after:opacity-0 after:transition-all after:border after:border-green-600 after:scale-125 hover:after:opacity-100 hover:after:scale-100">
            Success
          </button>
          <button className="py-2 px-6 text-center text-amber-600 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:z-10 before:bg-amber-500/10 before:transition-all hover:before:opacity-0 hover:before:scale-50 after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-10 after:opacity-0 after:transition-all after:border after:border-amber-600 after:scale-125 hover:after:opacity-100 hover:after:scale-100">
            Warning
          </button>
          <button className="py-2 px-6 text-center text-red-600 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:z-10 before:bg-red-500/10 before:transition-all hover:before:opacity-0 hover:before:scale-50 after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-10 after:opacity-0 after:transition-all after:border after:border-red-600 after:scale-125 hover:after:opacity-100 hover:after:scale-100">
            Danger
          </button>
          <button className="py-2 px-6 text-center text-sky-600 relative before:absolute before:top-0 before:left-0 before:w-full before:h-full before:z-10 before:bg-sky-500/10 before:transition-all hover:before:opacity-0 hover:before:scale-50 after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-10 after:opacity-0 after:transition-all after:border after:border-sky-600 after:scale-125 hover:after:opacity-100 hover:after:scale-100">
            Info
          </button>
        </div>
      );
    };