diff --git a/web/components/button.tsx b/web/components/button.tsx
index f2d13022..dbb28122 100644
--- a/web/components/button.tsx
+++ b/web/components/button.tsx
@@ -37,8 +37,8 @@ export function Button(props: {
     sm: 'px-3 py-2 text-sm',
     md: 'px-4 py-2 text-sm',
     lg: 'px-4 py-2 text-base',
-    xl: 'px-6 py-3 text-base',
-    '2xl': 'px-6 py-3 text-xl',
+    xl: 'px-6 py-2.5 text-base font-semibold',
+    '2xl': 'px-6 py-3 text-xl font-semibold',
   }[size]
 
   return (
@@ -54,7 +54,7 @@ export function Button(props: {
         color === 'indigo' && 'bg-indigo-500 text-white hover:bg-indigo-600',
         color === 'gray' && 'bg-gray-50 text-gray-600 hover:bg-gray-200',
         color === 'gradient' &&
-          'bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
+          'border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
         color === 'gray-white' &&
           'border-none bg-white text-gray-500 shadow-none hover:bg-gray-200',
         className
diff --git a/web/components/create-question-button.tsx b/web/components/create-question-button.tsx
index 30be2276..c7299904 100644
--- a/web/components/create-question-button.tsx
+++ b/web/components/create-question-button.tsx
@@ -3,9 +3,7 @@ import Link from 'next/link'
 import clsx from 'clsx'
 
 import { User } from 'web/lib/firebase/users'
-
-export const createButtonStyle =
-  'border-w-0 mx-auto mt-4 -ml-1 w-full rounded-md bg-gradient-to-r py-2.5 text-base font-semibold text-white shadow-sm lg:-ml-0 h-11'
+import { Button } from './button'
 
 export const CreateQuestionButton = (props: {
   user: User | null | undefined
@@ -13,9 +11,6 @@ export const CreateQuestionButton = (props: {
   className?: string
   query?: string
 }) => {
-  const gradient =
-    'from-indigo-500 to-blue-500 hover:from-indigo-700 hover:to-blue-700'
-
   const { user, overrideText, className, query } = props
 
   if (!user || user?.isBannedFromPosting) return <></>
@@ -23,9 +18,9 @@ export const CreateQuestionButton = (props: {
   return (
     <div className={clsx('flex justify-center', className)}>
       <Link href={`/create${query ? query : ''}`} passHref>
-        <button className={clsx(gradient, createButtonStyle)}>
-          {overrideText ? overrideText : 'Create a market'}
-        </button>
+        <Button color="gradient" size="xl" className="mt-4">
+          {overrideText ?? 'Create a market'}
+        </Button>
       </Link>
     </div>
   )