diff --git a/web/components/answers/answer-bet-panel.tsx b/web/components/answers/answer-bet-panel.tsx
index 85f61034..4842f4b2 100644
--- a/web/components/answers/answer-bet-panel.tsx
+++ b/web/components/answers/answer-bet-panel.tsx
@@ -184,16 +184,13 @@ export function AnswerBetPanel(props: {
       <Spacer h={6} />
       {user ? (
         <WarningConfirmationButton
+          size="xl"
           marketType="freeResponse"
           amount={betAmount}
           warning={warning}
           onSubmit={submitBet}
           isSubmitting={isSubmitting}
           disabled={!!betDisabled}
-          openModalButtonClass={clsx(
-            'btn self-stretch',
-            betDisabled ? 'btn-disabled' : 'btn-primary'
-          )}
         />
       ) : (
         <BetSignUpPrompt />
diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index 5d908937..5249e889 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -399,18 +399,12 @@ export function BuyPanel(props: {
             warning={warning}
             onSubmit={submitBet}
             isSubmitting={isSubmitting}
-            openModalButtonClass={clsx(
-              'btn mb-2 flex-1',
-              betDisabled || outcome === undefined
-                ? 'btn-disabled bg-greyscale-2'
-                : outcome === 'NO'
-                ? 'border-none bg-red-400 hover:bg-red-500'
-                : 'border-none bg-teal-500 hover:bg-teal-600'
-            )}
+            disabled={!!betDisabled || outcome === undefined}
+            size="xl"
           />
         )}
         <button
-          className="text-greyscale-6 mx-auto select-none text-sm underline xl:hidden"
+          className="text-greyscale-6 mx-auto mt-3 select-none text-sm underline xl:hidden"
           onClick={() => setSeeLimit(true)}
         >
           Advanced
diff --git a/web/components/button.tsx b/web/components/button.tsx
index ea9a3e88..51e25ea1 100644
--- a/web/components/button.tsx
+++ b/web/components/button.tsx
@@ -46,21 +46,27 @@ export function Button(props: {
     <button
       type={type}
       className={clsx(
-        'font-md items-center justify-center rounded-md border border-transparent shadow-sm hover:transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+        'font-md items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
         sizeClasses,
-        color === 'green' && 'btn-primary text-white',
-        color === 'red' && 'bg-red-400 text-white hover:bg-red-500',
-        color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500',
-        color === 'blue' && 'bg-blue-400 text-white hover:bg-blue-500',
-        color === 'indigo' && 'bg-indigo-500 text-white hover:bg-indigo-600',
-        color === 'gray' && 'bg-gray-50 text-gray-600 hover:bg-gray-200',
+        color === 'green' &&
+          'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
+        color === 'red' &&
+          'disabled:bg-greyscale-2 bg-red-400 text-white hover:bg-red-500',
+        color === 'yellow' &&
+          'disabled:bg-greyscale-2 bg-yellow-400 text-white hover:bg-yellow-500',
+        color === 'blue' &&
+          'disabled:bg-greyscale-2 bg-blue-400 text-white hover:bg-blue-500',
+        color === 'indigo' &&
+          'disabled:bg-greyscale-2 bg-indigo-500 text-white hover:bg-indigo-600',
+        color === 'gray' &&
+          'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
         color === 'gradient' &&
-          'border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
+          'disabled:bg-greyscale-2 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' &&
-          'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none',
+          'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
         color === 'highlight-blue' &&
-          'text-highlight-blue border-none shadow-none',
-        className
+          'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
       )}
       disabled={disabled}
       onClick={onClick}
diff --git a/web/components/confirmation-button.tsx b/web/components/confirmation-button.tsx
index 8dbe90c2..13c3c50a 100644
--- a/web/components/confirmation-button.tsx
+++ b/web/components/confirmation-button.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import { ReactNode, useState } from 'react'
+import { Button, SizeType } from './button'
 import { Col } from './layout/col'
 import { Modal } from './layout/modal'
 import { Row } from './layout/row'
@@ -22,6 +23,8 @@ export function ConfirmationButton(props: {
   onSubmit?: () => void
   onOpenChanged?: (isOpen: boolean) => void
   onSubmitWithSuccess?: () => Promise<boolean>
+  disabled: boolean
+  size?: SizeType
 }) {
   const {
     openModalBtn,
@@ -31,6 +34,8 @@ export function ConfirmationButton(props: {
     children,
     onOpenChanged,
     onSubmitWithSuccess,
+    disabled,
+    size,
   } = props
 
   const [open, setOpen] = useState(false)
@@ -68,13 +73,16 @@ export function ConfirmationButton(props: {
           </Row>
         </Col>
       </Modal>
-      <div
-        className={clsx('btn', openModalBtn.className)}
+      <Button
+        className={clsx(openModalBtn.className)}
         onClick={() => updateOpen(true)}
+        disabled={disabled}
+        color="yellow"
+        size={size}
       >
         {openModalBtn.icon}
         {openModalBtn.label}
-      </div>
+      </Button>
     </>
   )
 }
diff --git a/web/components/warning-confirmation-button.tsx b/web/components/warning-confirmation-button.tsx
index 7c546c3b..69a6f5e6 100644
--- a/web/components/warning-confirmation-button.tsx
+++ b/web/components/warning-confirmation-button.tsx
@@ -5,6 +5,7 @@ import { Row } from './layout/row'
 import { ConfirmationButton } from './confirmation-button'
 import { ExclamationIcon } from '@heroicons/react/solid'
 import { formatMoney } from 'common/util/format'
+import { Button, SizeType } from './button'
 
 export function WarningConfirmationButton(props: {
   amount: number | undefined
@@ -12,10 +13,11 @@ export function WarningConfirmationButton(props: {
   marketType: 'freeResponse' | 'binary'
   warning?: string
   onSubmit: () => void
-  disabled?: boolean
+  disabled: boolean
   isSubmitting: boolean
   openModalButtonClass?: string
   submitButtonClassName?: string
+  size: SizeType
 }) {
   const {
     amount,
@@ -26,53 +28,44 @@ export function WarningConfirmationButton(props: {
     openModalButtonClass,
     submitButtonClassName,
     outcome,
-    marketType,
+    size,
   } = props
+
   if (!warning) {
     return (
-      <button
-        className={clsx(
-          openModalButtonClass,
-          isSubmitting ? 'loading btn-disabled' : '',
-          disabled && 'btn-disabled',
-          marketType === 'binary'
-            ? !outcome
-              ? 'btn-disabled bg-greyscale-2'
-              : ''
-            : ''
-        )}
+      <Button
+        size={size}
+        disabled={isSubmitting || disabled}
+        className={clsx(openModalButtonClass, isSubmitting ? 'loading' : '')}
         onClick={onSubmit}
+        color={outcome === 'NO' ? 'red' : 'green'}
       >
         {isSubmitting
           ? 'Submitting...'
           : amount
           ? `Wager ${formatMoney(amount)}`
           : 'Wager'}
-      </button>
+      </Button>
     )
   }
 
   return (
     <ConfirmationButton
+      disabled={isSubmitting}
       openModalBtn={{
-        className: clsx(
-          openModalButtonClass,
-          isSubmitting && 'btn-disabled loading'
-        ),
+        className: clsx(isSubmitting && 'loading'),
         label: amount ? `Wager ${formatMoney(amount)}` : 'Wager',
       }}
       cancelBtn={{
         label: 'Cancel',
-        className: 'btn-warning',
+        className: 'btn btn-warning',
       }}
       submitBtn={{
         label: 'Submit',
-        className: clsx(
-          'border-none btn-sm btn-ghost self-center',
-          submitButtonClassName
-        ),
+        className: clsx('btn border-none btn-sm btn-ghost self-center'),
       }}
       onSubmit={onSubmit}
+      size={size}
     >
       <Row className="items-center text-xl">
         <ExclamationIcon