diff --git a/apps/builder/app/builder/features/topbar/share.tsx b/apps/builder/app/builder/features/topbar/share.tsx
index 07804a7987..0e8a6e821d 100644
--- a/apps/builder/app/builder/features/topbar/share.tsx
+++ b/apps/builder/app/builder/features/topbar/share.tsx
@@ -31,7 +31,9 @@ export const ShareButton = ({ projectId }: { projectId: Project["id"] }) => {
       <FloatingPanelAnchor>
         <Tooltip side="bottom" content={tooltipContent}>
           <FloatingPanelPopoverTrigger asChild>
-            <Button disabled={isShareDisabled}>Share</Button>
+            <Button disabled={isShareDisabled} color="gradient">
+              Share
+            </Button>
           </FloatingPanelPopoverTrigger>
         </Tooltip>
       </FloatingPanelAnchor>
diff --git a/packages/design-system/src/components/button.stories.tsx b/packages/design-system/src/components/button.stories.tsx
index 7f759584a7..88ae95fdc5 100644
--- a/packages/design-system/src/components/button.stories.tsx
+++ b/packages/design-system/src/components/button.stories.tsx
@@ -28,6 +28,7 @@ const colors: ReadonlyArray<ComponentProps<typeof ButtonComponent>["color"]> = [
   "positive",
   "ghost",
   "dark",
+  "gradient",
 ];
 
 const states: ReadonlyArray<ComponentProps<typeof ButtonComponent>["state"]> = [
diff --git a/packages/design-system/src/components/button.tsx b/packages/design-system/src/components/button.tsx
index e3ae7940de..4d6964be32 100644
--- a/packages/design-system/src/components/button.tsx
+++ b/packages/design-system/src/components/button.tsx
@@ -19,6 +19,7 @@ const colors = [
   "neutral",
   "ghost",
   "dark",
+  "gradient",
 ] as const;
 
 type ButtonColor = (typeof colors)[number];
@@ -32,6 +33,7 @@ const backgrounds: Record<ButtonColor, string> = {
   positive: theme.colors.backgroundSuccessMain,
   ghost: theme.colors.backgroundHover,
   dark: theme.colors.backgroundTopbar,
+  gradient: theme.colors.backgroundGradientPrimary,
 };
 
 const foregrounds: Record<ButtonColor, string> = {
@@ -41,6 +43,7 @@ const foregrounds: Record<ButtonColor, string> = {
   neutral: theme.colors.foregroundMain,
   ghost: theme.colors.foregroundMain,
   dark: theme.colors.foregroundContrastMain,
+  gradient: theme.colors.foregroundContrastMain,
 };
 
 // CSS supports multiple gradients as backgrounds but not multiple colors
@@ -52,10 +55,13 @@ const perColorStyle = (variant: ButtonColor) => ({
   color: foregrounds[variant],
 
   "&[data-state=auto]:hover, &[data-state=hover]": {
-    background: backgroundColors(
-      backgrounds[variant],
-      theme.colors.backgroundButtonHover
-    ),
+    background:
+      variant === "gradient"
+        ? `linear-gradient(${theme.colors.backgroundButtonHover}, ${theme.colors.backgroundButtonHover}), ${backgrounds[variant]}`
+        : backgroundColors(
+            backgrounds[variant],
+            theme.colors.backgroundButtonHover
+          ),
   },
 
   "&[data-state=auto]:focus-visible, &[data-state=focus]": {
@@ -64,10 +70,13 @@ const perColorStyle = (variant: ButtonColor) => ({
   },
 
   "&[data-state=auto]:active, &[data-state=pressed]": {
-    background: backgroundColors(
-      backgrounds[variant],
-      theme.colors.backgroundButtonPressed
-    ),
+    background:
+      variant === "gradient"
+        ? `linear-gradient(${theme.colors.backgroundButtonPressed}, ${theme.colors.backgroundButtonPressed}), ${backgrounds[variant]}`
+        : backgroundColors(
+            backgrounds[variant],
+            theme.colors.backgroundButtonPressed
+          ),
   },
 
   "&[data-state=disabled]": {
@@ -101,6 +110,7 @@ const StyledButton = styled("button", {
       neutral: perColorStyle("neutral"),
       ghost: perColorStyle("ghost"),
       dark: perColorStyle("dark"),
+      gradient: perColorStyle("gradient"),
     },
   },