diff --git a/demos/aside/page1.html b/demos/aside/page1.html
index 3158b757ec..b5c0cdd93b 100644
--- a/demos/aside/page1.html
+++ b/demos/aside/page1.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle id="e2eHeaderToggleMenu">
+  <a menu-toggle id="e2eHeaderToggleMenu">
     <icon menu></icon>
-  </button>
+  </a>
 
   <ion-title>
     Menu
diff --git a/demos/aside/page2.html b/demos/aside/page2.html
index 5e7decd736..4a7e564244 100644
--- a/demos/aside/page2.html
+++ b/demos/aside/page2.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle id="e2eHeaderToggleMenu">
+  <a menu-toggle id="e2eHeaderToggleMenu">
     <icon menu></icon>
-  </button>
+  </a>
 
   <ion-title>
     Menu
diff --git a/demos/material/index.ts b/demos/material/index.ts
index e36909fc09..7216186557 100644
--- a/demos/material/index.ts
+++ b/demos/material/index.ts
@@ -5,9 +5,9 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
 @IonicView({
   template: '<ion-navbar *navbar primary>' +
     '<ion-title>Heading</ion-title>' +
-    '<button menu-toggle="menu">' +
+    '<a menu-toggle="menu">' +
       '<icon menu></icon>' +
-    '</button>' +
+    '</a>' +
     '<ion-nav-items secondary>' +
       '<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
       '<button (click)="showMoreMenu()"><i class="icon ion-android-more-vertical"></i></button>' +
diff --git a/demos/native/pages/battery.ts b/demos/native/pages/battery.ts
index 127b4a44f1..07031dddf1 100644
--- a/demos/native/pages/battery.ts
+++ b/demos/native/pages/battery.ts
@@ -4,9 +4,9 @@ import {IonicView} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button menu-toggle>
+    <a menu-toggle>
       <icon menu></icon>
-    </button>
+    </a>
     <ion-title>Battery</ion-title>
   </ion-navbar>
   <ion-content class="padding">
diff --git a/demos/native/pages/camera.ts b/demos/native/pages/camera.ts
index 28f8f48d37..087e03bd87 100644
--- a/demos/native/pages/camera.ts
+++ b/demos/native/pages/camera.ts
@@ -5,9 +5,9 @@ import {Camera} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button menu-toggle>
+    <a menu-toggle>
       <icon menu></icon>
-    </button>
+    </a>
     <ion-title>Camera</ion-title>
   </ion-navbar>
   <ion-content class="padding">
diff --git a/demos/native/pages/contacts.ts b/demos/native/pages/contacts.ts
index 0902c911e2..36437e6137 100644
--- a/demos/native/pages/contacts.ts
+++ b/demos/native/pages/contacts.ts
@@ -5,9 +5,9 @@ import {Contacts} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button menu-toggle>
+    <a menu-toggle>
       <icon menu></icon>
-    </button>
+    </a>
     <ion-title>Contacts</ion-title>
   </ion-navbar>
   <ion-content class="padding">
diff --git a/demos/native/pages/device-motion.ts b/demos/native/pages/device-motion.ts
index 192e63dee3..34da068c8b 100644
--- a/demos/native/pages/device-motion.ts
+++ b/demos/native/pages/device-motion.ts
@@ -4,9 +4,9 @@ import {IonicView} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button menu-toggle>
+    <a menu-toggle>
       <icon menu></icon>
-    </button>
+    </a>
     <ion-title>Device Motion</ion-title>
   </ion-navbar>
   <ion-content class="padding">
diff --git a/demos/native/pages/device.ts b/demos/native/pages/device.ts
index b8704ef6e8..339973dfa6 100644
--- a/demos/native/pages/device.ts
+++ b/demos/native/pages/device.ts
@@ -4,9 +4,9 @@ import {IonicView} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button menu-toggle>
+    <a menu-toggle>
       <icon menu></icon>
-    </button>
+    </a>
     <ion-title>Vibration</ion-title>
   </ion-navbar>
   <ion-content class="padding">
diff --git a/demos/native/pages/geolocation.ts b/demos/native/pages/geolocation.ts
index 3ca6a6a10c..e9172b5dae 100644
--- a/demos/native/pages/geolocation.ts
+++ b/demos/native/pages/geolocation.ts
@@ -5,9 +5,9 @@ import {Geolocation} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button menu-toggle>
+    <a menu-toggle>
       <icon menu></icon>
-    </button>
+    </a>
     <ion-title>Vibration</ion-title>
   </ion-navbar>
   <ion-content class="padding">
diff --git a/demos/native/pages/vibration.ts b/demos/native/pages/vibration.ts
index af3e79327c..7901623874 100644
--- a/demos/native/pages/vibration.ts
+++ b/demos/native/pages/vibration.ts
@@ -5,9 +5,9 @@ import {Vibration} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <button menu-toggle>
+    <a menu-toggle>
       <icon menu></icon>
-    </button>
+    </a>
     <ion-title>Vibration</ion-title>
   </ion-navbar>
   <ion-content class="padding">
diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index 917f99d78d..72aed021eb 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -5,7 +5,7 @@ import {Directive} from 'angular2/angular2';
  * TODO
  */
 @Directive({
-  selector: 'button,[button]',
+  selector: 'button,[button],[menu-toggle]',
   host: {
     '[class.icon-left]': 'iconLeft',
     '[class.icon-right]': 'iconRight',
diff --git a/ionic/components/menu/menu-toggle.ts b/ionic/components/menu/menu-toggle.ts
index c2b2087a63..ea9f5549eb 100644
--- a/ionic/components/menu/menu-toggle.ts
+++ b/ionic/components/menu/menu-toggle.ts
@@ -11,7 +11,8 @@ import {IonicApp} from '../app/app';
     'menuToggle'
   ],
   host: {
-    '(click)': 'toggle($event)'
+    '(click)': 'toggle($event)',
+    'button': ''
   }
 })
 export class MenuToggle {
diff --git a/ionic/components/menu/test/basic/page1.html b/ionic/components/menu/test/basic/page1.html
index 46e06967e2..3a65a14d01 100644
--- a/ionic/components/menu/test/basic/page1.html
+++ b/ionic/components/menu/test/basic/page1.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle id="e2eHeaderToggleMenu">
+  <a menu-toggle id="e2eHeaderToggleMenu">
     <icon menu></icon>
-  </button>
+  </a>
 
   <ion-title>
     Menu
diff --git a/ionic/components/menu/test/basic/page2.html b/ionic/components/menu/test/basic/page2.html
index 5e7decd736..4a7e564244 100644
--- a/ionic/components/menu/test/basic/page2.html
+++ b/ionic/components/menu/test/basic/page2.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle id="e2eHeaderToggleMenu">
+  <a menu-toggle id="e2eHeaderToggleMenu">
     <icon menu></icon>
-  </button>
+  </a>
 
   <ion-title>
     Menu
diff --git a/ionic/components/menu/test/overlay/page1.html b/ionic/components/menu/test/overlay/page1.html
index 99eb7dacf7..19b06004ae 100644
--- a/ionic/components/menu/test/overlay/page1.html
+++ b/ionic/components/menu/test/overlay/page1.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle="leftMenu">
+  <a menu-toggle="leftMenu">
     <icon menu></icon>
-  </button>
+  </a>
 
   <ion-title>
     Overlay Menu
diff --git a/ionic/components/menu/test/reveal/page1.html b/ionic/components/menu/test/reveal/page1.html
index fb6bab465a..6e4f46b80a 100644
--- a/ionic/components/menu/test/reveal/page1.html
+++ b/ionic/components/menu/test/reveal/page1.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <button menu-toggle="leftMenu">
+  <a menu-toggle="leftMenu">
     <icon menu></icon>
-  </button>
+  </a>
 
   <ion-title>
     Reveal Menu
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 4b73ad8f6e..b3772e3078 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -35,6 +35,7 @@ $toolbar-ios-title-font-size:               1.7rem !default;
 
   [menu-toggle] {
     order: map-get($toolbar-order-ios, 'menu-toggle');
+    margin-left: 10px;
   }
 
   ion-title {
diff --git a/ionic/components/toolbar/modes/material.scss b/ionic/components/toolbar/modes/material.scss
index 6e4104a93c..854f845404 100644
--- a/ionic/components/toolbar/modes/material.scss
+++ b/ionic/components/toolbar/modes/material.scss
@@ -46,15 +46,11 @@ $toolbar-md-button-font-size:        1.4rem !default;
     min-width: 28px;
   }
 
-  button[menu-toggle],
+  a[menu-toggle],
   [menu-toggle].activated {
-    margin: -$toolbar-padding 0 -$toolbar-padding -$toolbar-padding;
+    margin: ($toolbar-padding * -1) 20px ($toolbar-padding * -1) 8px;
     padding-bottom: $toolbar-padding / 2;
     height: $toolbar-md-height;
   }
 
-  [menu-toggle] icon {
-    padding: 0 33px 0 20px;
-  }
-
 }
diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html
index 16a1592018..be3919ce44 100644
--- a/ionic/components/toolbar/test/scenarios/main.html
+++ b/ionic/components/toolbar/test/scenarios/main.html
@@ -1,8 +1,8 @@
 
 <ion-toolbar>
-  <button menu-toggle>
+  <a menu-toggle>
     <icon menu></icon>
-  </button>
+  </a>
   <ion-title>menu-toggle left. This is the title that never ends. It just goes on and on my friend.</ion-title>
 </ion-toolbar>