diff --git a/web/account/log-in-form.react.js b/web/account/log-in-form.react.js
--- a/web/account/log-in-form.react.js
+++ b/web/account/log-in-form.react.js
@@ -149,7 +149,12 @@
           </div>
         </div>
         <div className={css['form-footer']}>
-          <Button type="submit" disabled={inputDisabled} onClick={onSubmit}>
+          <Button
+            variant="filled"
+            type="submit"
+            disabled={inputDisabled}
+            onClick={onSubmit}
+          >
             {loginButtonContent}
           </Button>
           <div className={css['modal-form-error']}>{errorMessage}</div>
diff --git a/web/chat/chat-thread-list.react.js b/web/chat/chat-thread-list.react.js
--- a/web/chat/chat-thread-list.react.js
+++ b/web/chat/chat-thread-list.react.js
@@ -56,7 +56,11 @@
         <div>{threadComponents}</div>
       </div>
       <div className={css.createNewThread}>
-        <Button disabled={isThreadCreation} onClick={onClickNewThread}>
+        <Button
+          variant="filled"
+          disabled={isThreadCreation}
+          onClick={onClickNewThread}
+        >
           Create new chat
         </Button>
       </div>
diff --git a/web/components/button.css b/web/components/button.css
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -1,18 +1,23 @@
+.plain {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
 .btn {
   --border-width: 1px;
   --border-radius: 4px;
 
   position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  border: var(--border-width) solid transparent;
   font-size: var(--m-font-16);
   padding: 12px 24px;
   color: var(--fg);
+  border: var(--border-width) solid transparent;
   border-radius: var(--border-radius);
-  cursor: pointer;
 }
 
 .btn.outline {
@@ -65,8 +70,7 @@
 }
 
 .text {
+  font-size: var(--m-font-16);
   background: transparent;
   white-space: nowrap;
-  padding: 0;
-  border: none;
 }
diff --git a/web/components/button.react.js b/web/components/button.react.js
--- a/web/components/button.react.js
+++ b/web/components/button.react.js
@@ -5,7 +5,7 @@
 
 import css from './button.css';
 
-export type ButtonVariant = 'filled' | 'outline' | 'text';
+export type ButtonVariant = 'plain' | 'filled' | 'outline' | 'text';
 export type ButtonColor = {
   +backgroundColor?: string,
   +color?: string,
@@ -27,7 +27,7 @@
 };
 
 export type ButtonProps = {
-  +onClick: (event: SyntheticEvent<HTMLButtonElement>) => mixed,
+  +onClick: ?(event: SyntheticEvent<HTMLButtonElement>) => mixed,
   +children: React.Node,
   +variant?: ButtonVariant,
   +buttonColor?: ButtonColor,
@@ -40,14 +40,18 @@
   const {
     onClick,
     children,
-    variant = 'filled',
+    variant = 'plain',
     buttonColor,
-    type,
+    type = 'button',
     disabled = false,
     className = '',
   } = props;
 
-  const btnCls = classnames(css.btn, css[variant]);
+  const btnCls = classnames({
+    [css.plain]: true,
+    [css.btn]: variant === 'filled' || variant === 'outline',
+    [css[variant]]: true,
+  });
 
   let style = {};
   if (buttonColor) {
diff --git a/web/modals/concurrent-modification-modal.react.js b/web/modals/concurrent-modification-modal.react.js
--- a/web/modals/concurrent-modification-modal.react.js
+++ b/web/modals/concurrent-modification-modal.react.js
@@ -23,6 +23,7 @@
           time as you! Please refresh the entry and try again.
         </p>
         <Button
+          variant="filled"
           onClick={props.onRefresh}
           type="submit"
           className={css.refresh_button}
diff --git a/web/modals/threads/members/members-modal.react.js b/web/modals/threads/members/members-modal.react.js
--- a/web/modals/threads/members/members-modal.react.js
+++ b/web/modals/threads/members/members-modal.react.js
@@ -96,7 +96,9 @@
     }
     return (
       <div className={css.addNewMembers}>
-        <Button onClick={onClickAddMembers}>Add members</Button>
+        <Button variant="filled" onClick={onClickAddMembers}>
+          Add members
+        </Button>
       </div>
     );
   }, [canAddMembers, onClickAddMembers]);
diff --git a/web/modals/threads/notifications/notifications-modal.react.js b/web/modals/threads/notifications/notifications-modal.react.js
--- a/web/modals/threads/notifications/notifications-modal.react.js
+++ b/web/modals/threads/notifications/notifications-modal.react.js
@@ -250,7 +250,7 @@
           {backgroundItem}
         </div>
         <Button
-          type="primary"
+          variant="filled"
           onClick={onClickSave}
           disabled={notificationSettings === initialThreadSetting}
         >
diff --git a/web/modals/threads/settings/thread-settings-general-tab.react.js b/web/modals/threads/settings/thread-settings-general-tab.react.js
--- a/web/modals/threads/settings/thread-settings-general-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-general-tab.react.js
@@ -185,6 +185,7 @@
         </div>
       </div>
       <SubmitSection
+        variant="filled"
         errorMessage={errorMessage}
         onClick={onSubmit}
         disabled={threadSettingsOperationInProgress || !changeQueued}
diff --git a/web/modals/threads/settings/thread-settings-privacy-tab.react.js b/web/modals/threads/settings/thread-settings-privacy-tab.react.js
--- a/web/modals/threads/settings/thread-settings-privacy-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-privacy-tab.react.js
@@ -165,6 +165,7 @@
       </div>
 
       <SubmitSection
+        variant="filled"
         onClick={onSubmit}
         disabled={threadSettingsOperationInProgress || !changeQueued}
         errorMessage={errorMessage}
diff --git a/web/settings/relationship/user-list-modal.react.js b/web/settings/relationship/user-list-modal.react.js
--- a/web/settings/relationship/user-list-modal.react.js
+++ b/web/settings/relationship/user-list-modal.react.js
@@ -39,7 +39,9 @@
           usersComparator={usersComparator}
           searchText={searchText}
         />
-        <Button onClick={onAddUsersClick}>{buttonLabel}</Button>
+        <Button variant="filled" onClick={onAddUsersClick}>
+          {buttonLabel}
+        </Button>
       </div>
     ),
     [