diff --git a/src/components/BrowserFilter/BrowserFilter.scss b/src/components/BrowserFilter/BrowserFilter.scss
index 55ad5e5fa5..5585ba7d28 100644
--- a/src/components/BrowserFilter/BrowserFilter.scss
+++ b/src/components/BrowserFilter/BrowserFilter.scss
@@ -138,6 +138,7 @@
 }
 
 .remove {
+  @include buttonReset;
   display: inline-block;
   height: 14px;
   margin: 8px;
diff --git a/src/components/BrowserFilter/FilterRow.react.js b/src/components/BrowserFilter/FilterRow.react.js
index f7c2eb05ef..de9416ded6 100644
--- a/src/components/BrowserFilter/FilterRow.react.js
+++ b/src/components/BrowserFilter/FilterRow.react.js
@@ -103,7 +103,7 @@ let FilterRow = ({
       options={constraints.map((c) => Constraints[c].name)}
       onChange={(c) => onChangeConstraint(constraintLookup[c])} />
     {compareValue(compareInfo, compareTo, onChangeCompareTo, active, parentContentId)}
-    <a role='button' href='javascript:;' className={styles.remove} onClick={onDeleteRow}><Icon name='minus-solid' width={14} height={14} fill='rgba(0,0,0,0.4)' /></a>
+    <button type='button' className={styles.remove} onClick={onDeleteRow}><Icon name='minus-solid' width={14} height={14} fill='rgba(0,0,0,0.4)' /></button>
   </div>
 );
 
diff --git a/src/components/Button/Button.react.js b/src/components/Button/Button.react.js
index 22698bc229..80baeb6e4e 100644
--- a/src/components/Button/Button.react.js
+++ b/src/components/Button/Button.react.js
@@ -39,15 +39,14 @@ let Button = (props) => {
     styleOverride = { width: props.width, minWidth: props.width, ...props.additionalStyles };
   }
   return (
-    <a
-      href='javascript:;'
-      role='button'
+    <button
+      type='button'
       style={styleOverride}
       className={classes.join(' ')}
       onClick={clickHandler}
       onFocus={(e) => { if (props.disabled) e.target.blur(); }} >
       <span>{props.value}</span>
-    </a>
+    </button>
   );
 }
 
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 4cb7f42a6c..7de9e42e30 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -9,17 +9,15 @@
 
 .button {
   @include DosisFont;
+  @include buttonReset($bg: none, $border: 1px solid $blue, $padding: 0 16px);
   display: inline-block;
   height: 30px;
-  border: 1px solid $blue;
   line-height: 28px;
   outline: 0;
   text-decoration: none;
   text-align: center;
   border-radius: 5px;
-  cursor: pointer;
   min-width: 110px;
-  padding: 0 16px;
   font-size: 14px;
 
   color: $blue;
diff --git a/src/components/Calendar/Calendar.react.js b/src/components/Calendar/Calendar.react.js
index 64076468c6..9ae8f8315c 100644
--- a/src/components/Calendar/Calendar.react.js
+++ b/src/components/Calendar/Calendar.react.js
@@ -49,8 +49,8 @@ export default class Calendar extends React.Component {
   renderMonth() {
     return (
       <div className={styles.month}>
-        <a href='javascript:;' role='button' onClick={this.handlePrev.bind(this)} />
-        <a href='javascript:;' role='button' onClick={this.handleNext.bind(this)} />
+        <button type='button' onClick={this.handlePrev.bind(this)} />
+        <button type='button' onClick={this.handleNext.bind(this)} />
         <div>{getMonth(this.state.currentMonth.getMonth()) + ' ' + this.state.currentMonth.getFullYear()}</div>
       </div>
     );
@@ -86,7 +86,7 @@ export default class Calendar extends React.Component {
           new Date(Date.UTC(this.state.currentMonth.getFullYear(), this.state.currentMonth.getMonth(), i))
       );
       labels.push(
-        <a href='javascript:;' role='button' key={'day' + i} className={className} onClick={onChange}>{i}</a>
+        <button type='button' key={'day' + i} className={className} onClick={onChange}>{i}</button>
       );
     }
     let classes = [styles.days];
diff --git a/src/components/Calendar/Calendar.scss b/src/components/Calendar/Calendar.scss
index e5ee94a608..8cef061694 100644
--- a/src/components/Calendar/Calendar.scss
+++ b/src/components/Calendar/Calendar.scss
@@ -17,13 +17,13 @@
 .month {
   margin-bottom: 10px;
 
-  a {
+  button {
+    @include buttonReset($border: 1px solid $blue);
     position: relative;
     display: inline-block;
     width: 14px;
     height: 14px;
     border-radius: 100%;
-    border: 1px solid $blue;
     opacity: 0.5;
     margin: 0 6px;
 
@@ -94,8 +94,8 @@
 }
 
 .days {
-  span, a {
-    @include DosisFont;
+  span, button {
+    @include buttonReset;
     display: inline-block;
     vertical-align: bottom;
     width: 26px;
@@ -122,13 +122,13 @@
     background: $darkBlue;
   }
 
-  .selected ~ a {
+  .selected ~ button {
     background: white;
   }
 }
 
 .shadeAfter {
-  .selected ~ a {
+  .selected ~ button {
     background: #efeff1;
   }
 }
diff --git a/src/components/CascadingView/CascadingView.react.js b/src/components/CascadingView/CascadingView.react.js
index e65446d7e1..103f5e0ee2 100644
--- a/src/components/CascadingView/CascadingView.react.js
+++ b/src/components/CascadingView/CascadingView.react.js
@@ -20,12 +20,11 @@ export default class CascadingView extends React.Component {
 
   render() {
     let { content, className, children, style } = this.props;
-    let expander = <a
-      href='javascript:;'
-      role='button'
-      className={styles.right}>
+    let expander = <button
+      type='button'
+      className={[styles.arrow, styles.right].join(' ')}>
       <div className={[baseStyles.center, this.state.expanded ? styles.expanded : styles.collapsed].join(' ') } />
-    </a>;
+    </button>;
     let childrenContainer = this.state.expanded ? (<div className={styles.childrenContainer}>
       <div className={styles.children}>{children}</div>
     </div>) : null;
diff --git a/src/components/CascadingView/CascadingView.scss b/src/components/CascadingView/CascadingView.scss
index 9780448eff..ab55ff1050 100644
--- a/src/components/CascadingView/CascadingView.scss
+++ b/src/components/CascadingView/CascadingView.scss
@@ -27,6 +27,10 @@ $arrowColor: #343445;
   padding: 0;
 }
 
+.arrow {
+  @include buttonReset;
+}
+
 .expanded {
   @include arrow('down', 12px, 10px, $arrowColor);
   content: '';
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
index 04007d4426..b1c89280ca 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
@@ -74,13 +74,12 @@ export default class DataBrowserHeaderBar extends React.Component {
       elements.push(
         readonly || preventSchemaEdits ? null : (
           <div key='add' className={styles.addColumn} style={finalStyle}>
-            <a
-              href='javascript:;'
-              role='button'
+            <button
+              type='button'
               className={styles.addColumnButton}
               onClick={onAddColumn}>
               Add a new column
-            </a>
+            </button>
           </div>
         )
       );
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
index 01a1283b32..d6d2097b92 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
@@ -33,9 +33,8 @@
 }
 
 .addColumnButton {
-  @include DosisFont;
+  @include buttonReset($bg: #343445);
   display: inline-block;
-  background: #343445;
   height: 20px;
   width: 130px;
   text-align: center;
diff --git a/src/components/Dropdown/Dropdown.react.js b/src/components/Dropdown/Dropdown.react.js
index 392530827c..f4aef51009 100644
--- a/src/components/Dropdown/Dropdown.react.js
+++ b/src/components/Dropdown/Dropdown.react.js
@@ -68,7 +68,7 @@ export default class Dropdown extends React.Component {
         <SliderWrap direction={Directions.DOWN} expanded={true}>
           <div style={{ width }} className={styles.menu}>
             {React.Children.map(this.props.children, c => (
-              <a href='javascript:;' onClick={this.select.bind(this, c.props.value)}>{c}</a>
+              <button type='button' onClick={this.select.bind(this, c.props.value)}>{c}</button>
             ))}
           </div>
         </SliderWrap>
diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
index ff4c65e22c..50ff4e70a3 100644
--- a/src/components/Dropdown/Dropdown.scss
+++ b/src/components/Dropdown/Dropdown.scss
@@ -28,6 +28,12 @@
   background: white;
   overflow: auto;
 
+  button {
+    @include buttonReset;
+    display: block;
+    width: 100%;
+  }
+
   .option {
     color: $blue;
     border-bottom: 1px solid $borderGrey;
diff --git a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js
index fa8a42a1cb..b686fb44de 100644
--- a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js
+++ b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js
@@ -278,13 +278,14 @@ export default class ExplorerQueryComposer extends React.Component {
     let deleteButton = null;
     if (!this.props.isTimeSeries || index !== 0 ) {
       deleteButton = (
-        <a
-          href='javascript:;'
-          role='button'
-          className={styles.del}
-          onClick={this.removeAdditionalQuery.bind(this, 'aggregates', index)}>
-          &times;
-        </a>
+        <div className={styles.delWrapper}>
+          <button
+            type='button'
+            className={styles.del}
+            onClick={this.removeAdditionalQuery.bind(this, 'aggregates', index)}>
+            &times;
+          </button>
+        </div>
       );
     }
 
@@ -340,13 +341,14 @@ export default class ExplorerQueryComposer extends React.Component {
     let specialGroup = this.props.isTimeSeries && index === 0;
     if (!specialGroup) {
       deleteButton = (
-        <a
-          href='javascript:;'
-          role='button'
-          className={styles.del}
-          onClick={this.removeAdditionalQuery.bind(this, 'groups', index)}>
-          &times;
-        </a>
+        <div className={styles.delWrapper}>
+          <button
+            type='button'
+            className={styles.del}
+            onClick={this.removeAdditionalQuery.bind(this, 'groups', index)}>
+            &times;
+          </button>
+        </div>
       );
     }
 
@@ -519,14 +521,15 @@ export default class ExplorerQueryComposer extends React.Component {
 
         {constraintView}
 
-        <a
-          href='javascript:;'
-          role='button'
-          className={styles.del}
-          onClick={this.removeAdditionalQuery.bind(this, 'filters', index)}>
-          &times;
-        </a>
+        <div className={styles.delWrapper}>
+          <button
+            type='button'
+            className={styles.del}
+            onClick={this.removeAdditionalQuery.bind(this, 'filters', index)}>
+            &times;
+          </button>
         </div>
+      </div>
     );
   }
 
@@ -563,13 +566,14 @@ export default class ExplorerQueryComposer extends React.Component {
             color='blue'
             width='100%' />
 
-          <a
-            href='javascript:;'
-            role='button'
-            className={styles.del}
-            onClick={this.removeAdditionalQuery.bind(this, 'orders', index)}>
-            &times;
-          </a>
+          <div className={styles.delWrapper}>
+            <button
+              type='button'
+              className={styles.del}
+              onClick={this.removeAdditionalQuery.bind(this, 'orders', index)}>
+              &times;
+            </button>
+          </div>
         </div>
       </div>
     );
@@ -613,33 +617,38 @@ export default class ExplorerQueryComposer extends React.Component {
             value={this.state.newName}
             onChange={this.handleNameChange.bind(this)}
             placeholder={'Give your query a name'} />
-          <a
-            href='javascript:;'
-            role='button'
-            className={styles.headerButton}
-            onClick={this.handleSave.bind(this)}>
-            { this.state.isSaved ? 'Rename' : 'Save' }
-          </a>
-          <a
-            href='javascript:;'
-            role='button'
-            className={[styles.headerButton, styles.secondaryColor].join(' ')}
-            onClick={this.toggleEditing.bind(this)}>
-            Cancel
-          </a>
+          <div className={styles.headerButtonCell}>
+            <button
+              type='button'
+              className={styles.headerButton}
+              onClick={this.handleSave.bind(this)}>
+              { this.state.isSaved ? 'Rename' : 'Save' }
+            </button>
+          </div>
+          <div className={styles.headerButtonCell}>
+            <button
+              type='button'
+              className={[styles.headerButton, styles.secondaryColor].join(' ')}
+              onClick={this.toggleEditing.bind(this)}>
+              Cancel
+            </button>
+          </div>
         </div>
       );
     } else {
       headerView = (
         <div className={[baseStyles.center, styles.headerView].join(' ')}>
           <h3 className={styles.headerLabel}>{ this.state.name || 'Build a custom query' }</h3>
-          { isNew ? null : <a
-            href='javascript:;'
-            role='button'
-            className={[styles.headerButton, styles.secondaryColor].join(' ')}
-            onClick={this.toggleEditing.bind(this)}>
-            { this.state.isSaved ? 'Rename' : 'Save' }
-          </a> }
+          { isNew ? null : (
+            <div className={styles.headerButtonCell}>
+              <button
+                type='button'
+                className={[styles.headerButton, styles.secondaryColor].join(' ')}
+                onClick={this.toggleEditing.bind(this)}>
+                { this.state.isSaved ? 'Rename' : 'Save' }
+              </button>
+            </div>
+          )}
         </div>
       );
     }
diff --git a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss
index 2ba6997898..9f72899e2c 100644
--- a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss
+++ b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss
@@ -63,10 +63,14 @@ $placeholderColor: rgba(255, 255, 255, 0.5);
     }
   }
 
-  .headerButton {
+  .headerButtonCell {
     display: table-cell;
     width: 40px;
     padding-left: 30px;
+  }
+
+  .headerButton {
+    @include buttonReset;
     color: white;
 
     &.secondaryColor {
@@ -104,11 +108,15 @@ $placeholderColor: rgba(255, 255, 255, 0.5);
     }
   }
 
-  .del {
+  .delWrapper {
     display: table-cell;
     vertical-align: middle;
     width: 24px;
     padding-left: 10px;
+  }
+
+  .del {
+    @include buttonReset;
     color: #d8d8d8;
     font-size: 18px;
     line-height: 18px;
diff --git a/src/components/ExplorerQueryPicker/ExplorerQueryPicker.react.js b/src/components/ExplorerQueryPicker/ExplorerQueryPicker.react.js
index 3cc05b398e..51a76b9ad6 100644
--- a/src/components/ExplorerQueryPicker/ExplorerQueryPicker.react.js
+++ b/src/components/ExplorerQueryPicker/ExplorerQueryPicker.react.js
@@ -27,20 +27,18 @@ let ExplorerQueryPicker = ({ queries, onCompose, onSelect, onDelete }) => {
                 <div
                   className={styles.queryItem}
                   key={`query_${j}`}>
-                  <a
-                    href='javascript:;'
-                    role='button'
+                  <button
+                    type='button'
                     onClick={() => onSelect(query)}
                     className={styles.queryLabel}>
                     {query.name}
-                  </a>
-                  {query.preset ? null : <a
-                    href='javascript:;'
-                    role='button'
+                  </button>
+                  {query.preset ? null : <button
+                    type='button'
                     onClick={() => onDelete(query)}
                     className={styles.del}>
                     &times;
-                  </a>}
+                  </button>}
                 </div>
               );
             });
diff --git a/src/components/ExplorerQueryPicker/ExplorerQueryPicker.scss b/src/components/ExplorerQueryPicker/ExplorerQueryPicker.scss
index 0d423b9a3d..d546a85b6c 100644
--- a/src/components/ExplorerQueryPicker/ExplorerQueryPicker.scss
+++ b/src/components/ExplorerQueryPicker/ExplorerQueryPicker.scss
@@ -29,11 +29,13 @@
     }
 
     .queryLabel {
+      @include buttonReset;
       color: $mainTextColor;
     }
   }
 
   .del {
+    @include buttonReset;
     position: absolute;
     right: 24px;
     color: #d8d8d8;
diff --git a/src/components/FormTable/FormTable.react.js b/src/components/FormTable/FormTable.react.js
index e0cc29c7ce..35cf9cf6d5 100644
--- a/src/components/FormTable/FormTable.react.js
+++ b/src/components/FormTable/FormTable.react.js
@@ -21,7 +21,7 @@ let Row = ({
       <div className={styles.header}>
         <span className={[styles.indicator, styles[color]].join(' ')} />
         <span className={styles.title}>{title}</span>
-        {typeof onDelete === 'function' ? <a href='javascript:;' role='button' className={styles.del} onClick={onDelete}>&times;</a> : null}
+        {typeof onDelete === 'function' ? <button type='button' className={styles.del} onClick={onDelete}>&times;</button> : null}
       </div>
       {notes.map(({ key, keyColor = '', value, strong }, index) => {
         return <div key={index.toString()} className={styles.info}>
diff --git a/src/components/FormTable/FormTable.scss b/src/components/FormTable/FormTable.scss
index 83f79db87f..fcd5e21204 100644
--- a/src/components/FormTable/FormTable.scss
+++ b/src/components/FormTable/FormTable.scss
@@ -64,6 +64,7 @@
 }
 
 .del {
+  @include buttonReset;
   position: absolute;
   top: 7px;
   right: 7px;
diff --git a/src/components/FourOhFour/FourOhFour.react.js b/src/components/FourOhFour/FourOhFour.react.js
index edbfd0d1a4..53aba06e1a 100644
--- a/src/components/FourOhFour/FourOhFour.react.js
+++ b/src/components/FourOhFour/FourOhFour.react.js
@@ -51,7 +51,7 @@ export default class FourOhFour extends React.Component {
           <div className={styles.message}>Oh no, we can't find that page!</div>
 
           <div className={styles.back}>
-            <a href='javascript:;' role='button' onClick={() => history.goBack()}>Go back</a>
+            <button type='button' onClick={() => history.goBack()}>Go back</button>
           </div>
         </div>
       </div>
diff --git a/src/components/FourOhFour/FourOhFour.scss b/src/components/FourOhFour/FourOhFour.scss
index 1242352a99..209001b87c 100644
--- a/src/components/FourOhFour/FourOhFour.scss
+++ b/src/components/FourOhFour/FourOhFour.scss
@@ -44,4 +44,9 @@
 
 .back {
   margin-top: 40px;
+
+  button {
+    @include buttonReset;
+    color: #fff;
+  }
 }
diff --git a/src/components/InlineSubmitInput/InlineSubmitInput.react.js b/src/components/InlineSubmitInput/InlineSubmitInput.react.js
index 0a38389a33..e8563090a7 100644
--- a/src/components/InlineSubmitInput/InlineSubmitInput.react.js
+++ b/src/components/InlineSubmitInput/InlineSubmitInput.react.js
@@ -46,9 +46,9 @@ export default class InlineSubmitInput extends React.Component {
             onChange={this.handleInputChange.bind(this)} />
         </div>
         { this.state.showButton ?
-          <a href='javascript:;' role='button' className={styles.button} onClick={this.handleSubmit.bind(this)}>
+          <button type='button' className={styles.button} onClick={this.handleSubmit.bind(this)}>
             <span>{this.props.submitButtonText}</span>
-          </a>
+          </button>
           : null
         }
       </div>
diff --git a/src/components/InlineSubmitInput/InlineSubmitInput.scss b/src/components/InlineSubmitInput/InlineSubmitInput.scss
index d258027887..10f39b6472 100644
--- a/src/components/InlineSubmitInput/InlineSubmitInput.scss
+++ b/src/components/InlineSubmitInput/InlineSubmitInput.scss
@@ -17,19 +17,17 @@
 }
 
 .button {
-  @include DosisFont;
+  @include buttonReset($border: 1px solid #159cee, $padding: 0px 7px);
   position: absolute;
   top: 30px;
   right: 15px;
   height: 20px;
   line-height: 20px;
-  border: 1px solid #159cee;
   outline: 0;
   text-decoration: none;
   text-align: center;
   border-radius: 5px;
   cursor: pointer;
-  padding: 0px 7px;
   font-size: 10px;
   color: #159cee;
 }
diff --git a/src/components/LoginForm/LoginForm.example.js b/src/components/LoginForm/LoginForm.example.js
index b7711238e7..010dee5832 100644
--- a/src/components/LoginForm/LoginForm.example.js
+++ b/src/components/LoginForm/LoginForm.example.js
@@ -18,7 +18,6 @@ export const demos = [
         <div style={{ background: '#06283D', height: 500, position: 'relative' }}>
           <LoginForm
             header='Access your Dashboard'
-            footer={<a href='javascript:;'>Forgot something?</a>}
             action='Log In'>
             <LoginRow
               label='Email'
diff --git a/src/components/PermissionsDialog/PermissionsDialog.react.js b/src/components/PermissionsDialog/PermissionsDialog.react.js
index 6c527ce670..5bca1710bd 100644
--- a/src/components/PermissionsDialog/PermissionsDialog.react.js
+++ b/src/components/PermissionsDialog/PermissionsDialog.react.js
@@ -1059,13 +1059,12 @@ export default class PermissionsDialog extends React.Component {
     if (!this.state.transitioning) {
       trash = (
         <div className={styles.delete}>
-          <a
-            href="javascript:;"
-            role="button"
+          <button
+            type='button'
             onClick={this.deleteRow.bind(this, key, pointer)}
           >
             <Icon name="trash-solid" width={20} height={20} />
-          </a>
+          </button>
         </div>
       );
     }
diff --git a/src/components/PermissionsDialog/PermissionsDialog.scss b/src/components/PermissionsDialog/PermissionsDialog.scss
index 48e3090878..bebaee7ef4 100644
--- a/src/components/PermissionsDialog/PermissionsDialog.scss
+++ b/src/components/PermissionsDialog/PermissionsDialog.scss
@@ -314,6 +314,10 @@
    height: 50px;
    padding-top: 15px;
    text-align: right;
+
+   button {
+     @include buttonReset;
+   }
  
    svg {
      vertical-align: top;
diff --git a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js
index 50621db651..8146b7df37 100644
--- a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js
+++ b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js
@@ -357,13 +357,12 @@ export default class ProtectedFieldsDialog extends React.Component {
     if (!this.state.transitioning) {
       trash = (
         <div className={styles.delete}>
-          <a
-            href="javascript:;"
-            role="button"
+          <button
+            type='button'
             onClick={this.deleteRow.bind(this, key)}
           >
             <Icon name="trash-solid" width={20} height={20} />
-          </a>
+          </button>
         </div>
       );
     }
diff --git a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss
index 5888126fec..9750f8e5ac 100644
--- a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss
+++ b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss
@@ -176,6 +176,10 @@ $permissionsDialogWidth: calc(
   padding-top: 15px;
   text-align: right;
 
+  button {
+    @include buttonReset;
+  }
+
   svg {
     vertical-align: top;
     cursor: pointer;
diff --git a/src/components/PushAudienceDialog/InstallationCondition.react.js b/src/components/PushAudienceDialog/InstallationCondition.react.js
index b9f3b68564..617aff8539 100644
--- a/src/components/PushAudienceDialog/InstallationCondition.react.js
+++ b/src/components/PushAudienceDialog/InstallationCondition.react.js
@@ -115,15 +115,13 @@ export default class InstallationCondition extends React.Component {
       </div>
     );
 
-    //TODO Shoulse use <Button> and have a link type style without border.
     let labelDescription = (
-      <a
-        href='javascript:;'
-        role='button'
+      <button
+        type='button'
         className={styles.description}
         onClick={this.props.onDeleteRow}>
         Remove
-      </a>
+      </button>
     );
 
     return (
diff --git a/src/components/PushAudienceDialog/InstallationCondition.scss b/src/components/PushAudienceDialog/InstallationCondition.scss
index 53e498af8b..e26306414a 100644
--- a/src/components/PushAudienceDialog/InstallationCondition.scss
+++ b/src/components/PushAudienceDialog/InstallationCondition.scss
@@ -17,7 +17,7 @@
 .description {
   margin-top: 2px;
   color: $pink;
-  cursor: pointer;
+  @include buttonReset;
 }
 
 .valueInput {
diff --git a/src/components/PushAudiencesSelector/PushAudiencesOption.react.js b/src/components/PushAudiencesSelector/PushAudiencesOption.react.js
index fd458e6560..f91e5c1b6a 100644
--- a/src/components/PushAudiencesSelector/PushAudiencesOption.react.js
+++ b/src/components/PushAudiencesSelector/PushAudiencesOption.react.js
@@ -85,24 +85,22 @@ export default class PushAudiencesOption extends PushAudiencesBaseRow {
             <div className={styles.subline}>
               {detailsView}
               {!this.state.isNewSegment ?
-                <a
-                  role='button'
+                <button
+                  type='button'
                   className={[styles.moreDetails, !this.props.query ? styles.hideMoreDetails : ''].join(' ')}
-                  href='javascript:;'
                   onClick={this.handleDetailsToggle.bind(this,this.props.query, this.props.schema)}>
                   {this.state.expandedView ? 'less details' : 'more details'}
-                </a> :
-                <a
-                  role='button'
+                </button> :
+                <button
+                  type='button'
                   className={[styles.moreDetails, !this.props.query ? styles.hideMoreDetails : ''].join(' ')}
-                  href='javascript:;'
                   onClick={this.props.onEditAudience.bind(undefined, {
                     name: this.props.name,
                     filters: this.props.filters,
                     query: this.props.query,
                   })}>
                   {'Edit audience'}
-                </a>
+                </button>
               }
             </div>
           </div>
diff --git a/src/components/PushAudiencesSelector/PushAudiencesOption.scss b/src/components/PushAudiencesSelector/PushAudiencesOption.scss
index cd8a344856..00a49117b3 100644
--- a/src/components/PushAudiencesSelector/PushAudiencesOption.scss
+++ b/src/components/PushAudiencesSelector/PushAudiencesOption.scss
@@ -88,6 +88,7 @@
     }
 
     .moreDetails {
+      @include buttonReset;
       color: $blue;
 
       &.hideMoreDetails {
diff --git a/src/dashboard/Analytics/Explorer/Explorer.react.js b/src/dashboard/Analytics/Explorer/Explorer.react.js
index 808b0d59e9..203fcfff4a 100644
--- a/src/dashboard/Analytics/Explorer/Explorer.react.js
+++ b/src/dashboard/Analytics/Explorer/Explorer.react.js
@@ -335,22 +335,20 @@ class Explorer extends DashboardView {
       <Toolbar
         section='Analytics'
         subsection='Explorer'>
-        <a
-          href='javascript:;'
-          role='button'
+        <button
+          type='button'
           className={styles.toolbarAction}
           style={{ borderRight: '1px solid #66637a' }}>
           <Icon name='question-solid' width={14} height={14} fill='#66637a' />
           FAQ
-        </a>
-        <a
-          href='javascript:;'
-          role='button'
+        </button>
+        <button
+          type='button'
           onClick={this.handleDownload.bind(this)}
           className={styles.toolbarAction}>
           <Icon name='download' width={14} height={14} fill='#66637a' />
           Download
-        </a>
+        </button>
       </Toolbar>
     );
 
diff --git a/src/dashboard/Analytics/Explorer/Explorer.scss b/src/dashboard/Analytics/Explorer/Explorer.scss
index ffab36b5c0..b0998b4c27 100644
--- a/src/dashboard/Analytics/Explorer/Explorer.scss
+++ b/src/dashboard/Analytics/Explorer/Explorer.scss
@@ -44,7 +44,7 @@
 }
 
 .toolbarAction {
-  padding: 0px 20px;
+  @include buttonReset($padding: 0 20px);
   color: white;
 
   > *:not(svg) {
diff --git a/src/dashboard/Analytics/SlowQueries/SlowQueries.react.js b/src/dashboard/Analytics/SlowQueries/SlowQueries.react.js
index c0ac36aee7..62066dca50 100644
--- a/src/dashboard/Analytics/SlowQueries/SlowQueries.react.js
+++ b/src/dashboard/Analytics/SlowQueries/SlowQueries.react.js
@@ -164,14 +164,13 @@ class SlowQueries extends TableView {
               ...newValue,
               mutated: true
             })} />
-          <a
-            href='javascript:;'
-            role='button'
+          <button
+            type='button'
             onClick={this.handleDownload.bind(this)}
             className={styles.toolbarAction}>
             <Icon name='download' width={14} height={14} fill='#66637a' />
             Download
-          </a>
+          </button>
         </div>
       );
     }
diff --git a/src/dashboard/Analytics/SlowQueries/SlowQueries.scss b/src/dashboard/Analytics/SlowQueries/SlowQueries.scss
index e574817d53..a3fa38ca17 100644
--- a/src/dashboard/Analytics/SlowQueries/SlowQueries.scss
+++ b/src/dashboard/Analytics/SlowQueries/SlowQueries.scss
@@ -8,7 +8,7 @@
 @import 'stylesheets/globals.scss';
 
 .toolbarAction {
-  padding: 0px 20px;
+  @include buttonReset($padding: 0px 20px);
   color: white;
 
   > *:not(svg) {
diff --git a/src/dashboard/Data/Webhooks/Webhooks.react.js b/src/dashboard/Data/Webhooks/Webhooks.react.js
index 726c7fc349..99e797db67 100644
--- a/src/dashboard/Data/Webhooks/Webhooks.react.js
+++ b/src/dashboard/Data/Webhooks/Webhooks.react.js
@@ -23,6 +23,7 @@ import TextInput                             from 'components/TextInput/TextInpu
 import Toolbar                               from 'components/Toolbar/Toolbar.react';
 import { ActionTypes as SchemaActionTypes }  from 'lib/stores/SchemaStore';
 import { ActionTypes as WebhookActionTypes } from 'lib/stores/WebhookStore';
+import styles                                from './Webhooks.scss'
 
 let TableWarning = ({ text }) => <div>
   <Icon name='warn-outline' fill='#343445' width={20} height={20}/><span style={{ position: 'relative', top: '2px' }}> {text}</span>
@@ -250,9 +251,9 @@ class Webhooks extends TableView {
     let rowStyle = hook.url ? { cursor: 'pointer' } : {};
     let deleteColumnContents = null;
     if (hook.url) {
-      deleteColumnContents = <a role='button' href='javascript:;' onClick={showDelete}>
+      deleteColumnContents = <button type='button' onClick={showDelete} className={styles.deleteButton}>
         <Icon name='trash-outline' fill='#343445' width={20} height={20}/>
-      </a>;
+      </button>;
     } else {
       let isOverridden = !!this.tableData().find(otherHook => otherHook.url &&
         otherHook.functionName == hook.functionName &&
diff --git a/src/dashboard/Data/Webhooks/Webhooks.scss b/src/dashboard/Data/Webhooks/Webhooks.scss
new file mode 100644
index 0000000000..4296155288
--- /dev/null
+++ b/src/dashboard/Data/Webhooks/Webhooks.scss
@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+ @import 'stylesheets/globals.scss';
+
+.deleteButton {
+  @include buttonReset;
+}
diff --git a/src/dashboard/Push/Push.scss b/src/dashboard/Push/Push.scss
index df0151aaf9..e7ccc68468 100644
--- a/src/dashboard/Push/Push.scss
+++ b/src/dashboard/Push/Push.scss
@@ -70,6 +70,7 @@
 }
 
 .localeRemoveButton {
+  @include buttonReset;
   position: absolute;
   right: 15px;
   font-size: 12px;
diff --git a/src/dashboard/Push/PushAudiencesIndexRow.react.js b/src/dashboard/Push/PushAudiencesIndexRow.react.js
index ad2dc020b4..344a597d6f 100644
--- a/src/dashboard/Push/PushAudiencesIndexRow.react.js
+++ b/src/dashboard/Push/PushAudiencesIndexRow.react.js
@@ -40,24 +40,22 @@ export default class PushAudiencesIndexRow extends PushAudiencesBaseRow {
       <tr>
         <td className={styles.colName}>
           {this.props.name}
-          <a
+          <button
             className={styles.newPushButton}
-            href='javascript:;'
-            role='button'
+            type='button'
             onClick={this.props.onSendPush.bind(undefined, this.props.id)}>
               Send a new push
-          </a>
+          </button>
         </td>
         <td className={styles.colSize}>{countDetails}</td>
         <td className={styles.colDetails}>
           {detailsView}
-          <a
-            role='button'
-            href='javascript:;'
+          <button
+            type='button'
             className={[styles.moreDetails, !this.props.query ? styles.hideMoreDetails : ''].join(' ')}
             onClick={this.handleDetailsToggle.bind(this,this.props.query, this.props.schema)}>
             {this.state.expandedView ? 'less details' : 'more details' }
-          </a>
+          </button>
         </td>
         <td className={styles.colCreatedOn}>
           {DateUtils.yearMonthDayFormatter(this.props.createdAt)}
@@ -66,13 +64,12 @@ export default class PushAudiencesIndexRow extends PushAudiencesBaseRow {
           {this.props.timesUsed}
         </td>
         <td className={styles.colAction}>
-          <a
+          <button
             className={styles.removeIcon}
-            role='button'
-            href='javascript:;'
+            type='button'
             onClick={this.props.onDelete.bind(undefined, this.props.id, this.props.name)}>
             <Icon name='trash-outline' fill='#343445' width={20} height={20} role='button'/>
-          </a>
+          </button>
         </td>
       </tr>
     );
diff --git a/src/dashboard/Push/PushAudiencesIndexRow.scss b/src/dashboard/Push/PushAudiencesIndexRow.scss
index d12683d094..4aff60cfae 100644
--- a/src/dashboard/Push/PushAudiencesIndexRow.scss
+++ b/src/dashboard/Push/PushAudiencesIndexRow.scss
@@ -60,6 +60,7 @@
 }
 
 .moreDetails {
+  @include buttonReset;
   color: $blue;
   font-size: 14px;
 
@@ -73,6 +74,7 @@
 }
 
 .newPushButton {
+  @include buttonReset;
   font-size: 14px;
   display: block;
   margin: -5px 0 -10px 0;
@@ -84,6 +86,7 @@
 
 //NOTE: May be used to global so SVG icons wrapped by <a> can have common styles.
 .removeIcon {
+  @include buttonReset;
   &:hover, &:focus {
     svg {
       fill: $blue;
diff --git a/src/dashboard/Push/PushNew.react.js b/src/dashboard/Push/PushNew.react.js
index ad5ecc2171..40307f2297 100644
--- a/src/dashboard/Push/PushNew.react.js
+++ b/src/dashboard/Push/PushNew.react.js
@@ -75,7 +75,7 @@ let LocalizedMessageField = ({
     <div className={styles.localeContainer}>
       <div className={styles.localeTitle}>
         <span>Localized message</span>
-        <a href='javascript:;' role='button' className={styles.localeRemoveButton} onClick={onClickRemove.bind(undefined, id, currentLocaleOption)}>REMOVE</a>
+        <button type='button' className={styles.localeRemoveButton} onClick={onClickRemove.bind(undefined, id, currentLocaleOption)}>REMOVE</button>
       </div>
       <Field
         key={`message1_${id}`}
diff --git a/src/stylesheets/globals.scss b/src/stylesheets/globals.scss
index e70066e8b8..c65548b082 100644
--- a/src/stylesheets/globals.scss
+++ b/src/stylesheets/globals.scss
@@ -194,3 +194,11 @@ $sidebarCollapsedWidth: 54px;
   }
 }
 }
+
+@mixin buttonReset($bg: none, $border: 0, $padding: 0) {
+  border: $border;
+  background: $bg;
+  cursor: pointer;
+  font-family: inherit;
+  padding: $padding;
+}