diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss
index 896a7b63a2..aae45fcda5 100644
--- a/ionic/components/segment/modes/md.scss
+++ b/ionic/components/segment/modes/md.scss
@@ -13,28 +13,24 @@ $segment-button-md-border-color-activated:     map-get($colors-md, primary) !def
 $segment-button-md-border-bottom:              2px solid rgba(#000000, 0.10) !default;
 
 
-ion-segment {
+.segment-button {
+  border-width: 0;
+  transition: 100ms all linear;
+  font-size: $segment-button-md-font-size;
+  opacity: 0.7;
 
-  button,
-  [button] {
-    border-width: 0;
-    transition: 100ms all linear;
-    font-size: $segment-button-md-font-size;
-    opacity: 0.7;
+  min-height: $segment-button-md-min-height;
+  line-height: $segment-button-md-line-height;
 
-    min-height: $segment-button-md-min-height;
-    line-height: $segment-button-md-line-height;
-
-    &.activated, &.segment-activated {
-      color: $segment-button-md-text-color-activated;
-      background-color: transparent;
-      border-color: $segment-button-md-border-color-activated;
-    }
-
-    border-radius: 0;
-    border-bottom: $segment-button-md-border-bottom;
+  &.activated,
+  &.segment-activated {
+    color: $segment-button-md-text-color-activated;
+    background-color: transparent;
+    border-color: $segment-button-md-border-color-activated;
   }
 
+  border-radius: 0;
+  border-bottom: $segment-button-md-border-bottom;
 }
 
 .toolbar {
@@ -42,8 +38,8 @@ ion-segment {
   ion-segment {
     margin: 0 auto;
 
-    ion-segment-button[button][outline].activated,
-    ion-segment-button[button][outline].segment-activated {
+    .segment-button.activated,
+    .segment-button.segment-activated {
       background-color: transparent;
       opacity: 1;
     }
@@ -57,15 +53,13 @@ ion-segment {
 @mixin segment-button($button-color) {
   background-color: transparent;
 
-  &[outline] {
-    color: $button-color;
+  color: $button-color;
 
-    &.activated, &.segment-activated {
-      background-color: transparent;
-      color: $button-color;
-      border-color: $button-color;
-      opacity: 1;
-    }
+  &.activated, &.segment-activated {
+    background-color: transparent;
+    color: $button-color;
+    border-color: $button-color;
+    opacity: 1;
   }
 }
 
@@ -78,7 +72,7 @@ ion-segment {
   .toolbar[#{$color-name}] {
 
     ion-segment {
-      ion-segment-button[button] {
+      .segment-button {
         @include segment-button($inverse-color-value);
       }
     }
@@ -88,7 +82,7 @@ ion-segment {
     // this will take priority over the default toolbar colors
     @each $color-name, $color-value in $colors-md {
       ion-segment[#{$color-name}] {
-        ion-segment-button[button] {
+        .segment-button {
           @include segment-button($color-value);
         }
       }
@@ -97,7 +91,7 @@ ion-segment {
   }
 
   ion-segment[#{$color-name}] {
-    ion-segment-button[button] {
+    .segment-button {
       @include segment-button($color-value);
     }
 
diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss
index 821d6da4b6..92058a7a08 100644
--- a/ionic/components/segment/segment.scss
+++ b/ionic/components/segment/segment.scss
@@ -7,33 +7,31 @@ $segment-button-padding:    0 16px !default;
 
 
 ion-segment {
-
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 1;
   width: 100%;
-
-  button,
-  [button] {
-
-    margin-left: 0;
-    margin-right: 0;
-
-    flex: 1;
-    display: block;
-    overflow: hidden;
-
-    padding: $segment-button-padding;
-    width: 0;
-
-    border-width: 1px 0px 1px 1px;
-    border-radius: 0;
-
-    text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    background: none;
-  }
+}
+
+.segment-button {
+  position: relative;
+  overflow: hidden;
+  display: block;
+
+  margin-left: 0;
+  margin-right: 0;
+  padding: $segment-button-padding;
+
+  flex: 1;
+  width: 0;
+
+  border-width: 1px 0px 1px 1px;
+  border-radius: 0;
+
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  background: none;
 }
diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts
index 9c6a262de5..958cace5aa 100644
--- a/ionic/components/segment/segment.ts
+++ b/ionic/components/segment/segment.ts
@@ -177,7 +177,7 @@ export class Segment extends Ion {
   ],
   host: {
     '(click)': 'click($event)',
-    '[class.segment-activated]': 'isActive',
+    '[class.segment-activated]': 'isActive'
   }
 })
 export class SegmentButton {
@@ -189,8 +189,8 @@ export class SegmentButton {
   ) {
     this.segment = segment;
 
-    renderer.setElementAttribute(elementRef, 'button', '');
-    renderer.setElementAttribute(elementRef, 'outline', '');
+    renderer.setElementClass(elementRef, 'segment-button', true);
+    renderer.setElementAttribute(elementRef, 'tappable', '');
   }
 
   /**
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 6bdfcd5687..98424535d1 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -274,14 +274,16 @@ ion-buttons[right] {
 // iOS Toolbar Menu Toggle
 // --------------------------------------------------
 
-[menu-toggle] {
-  order: map-get($toolbar-order-ios, menu-toggle-start);
-  cursor: pointer;
-}
+.toolbar {
+  [menu-toggle] {
+    order: map-get($toolbar-order-ios, menu-toggle-start);
+    cursor: pointer;
+  }
 
-[menu-toggle][end],
-[menu-toggle][right] {
-  order: map-get($toolbar-order-ios, menu-toggle-end);
+  [menu-toggle][end],
+  [menu-toggle][right] {
+    order: map-get($toolbar-order-ios, menu-toggle-end);
+  }
 }
 
 ion-segment-button[button] {