diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 2df50c1d4d..129f26b846 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -62,12 +62,7 @@ a.button {
 // --------------------------------------------------
 
 .button-full {
-  margin-right: 0;
-  margin-left: 0;
   width: 100%;
-  border-radius: 0;
-  border-right-width: 0;
-  border-left-width: 0;
 }
 
 
@@ -79,27 +74,10 @@ a.button {
   border-radius: $button-round-border-radius;
 }
 
+// Full Outline Button
+// --------------------------------------------------
 
-
-// TODO
-// button should have classes:
-// button, button-primary, button-secondary, etc.
-// button holds all styling with default primary color(will this affect outline/clear?) and
-// the other classes change the color
-//
-// button-clear should have classes:
-// button-clear, button-clear-primary, button-clear-secondary, etc.
-// button-clear holds all clear styling with default primary color and
-// the other classes change the color
-//
-// button-outline should have classes:
-// button-outline, button-outline-primary, button-outline-secondary, etc.
-// button-outline holds all outline styling with default primary color and
-// the other classes change the color
-//
-// button-block should stand alone
-// button-full should stand alone
-// button-round should stand alone
-// button-disabled should stand alone(?)
-// button-sizes should stand alone (button-small, button-large, etc)
-// button-fab errrrr
+.button-full.button-outline {
+  border-left-width: 0;
+  border-right-width: 0;
+}
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index 98df3f9637..3a5958067f 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -20,6 +20,7 @@ $button-ios-large-padding:            1.0em !default;
 $button-ios-small-font-size:          1.3rem !default;
 $button-ios-small-height:             2.1em !default;
 $button-ios-small-padding:            0.9em !default;
+$button-ios-small-icon-font-size:     1.3em !default;
 
 
 // iOS Default Button
@@ -84,6 +85,9 @@ $button-ios-small-padding:            0.9em !default;
   font-size: $button-ios-small-font-size;
 }
 
+.button-small.button-icon-only icon {
+  font-size: $button-ios-small-icon-font-size;
+}
 
 // iOS Block Button
 // --------------------------------------------------
@@ -91,6 +95,19 @@ $button-ios-small-padding:            0.9em !default;
 .button-block {
   // This fixes an issue with flexbox and button on iOS Safari. See #225
   display: block;
+  line-height: 2.8em;
+}
+
+
+// iOS Full Button
+// --------------------------------------------------
+
+.button-full {
+  margin-right: 0;
+  margin-left: 0;
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
 }
 
 
@@ -141,6 +158,11 @@ $button-ios-small-padding:            0.9em !default;
   color: color-shade($button-ios-color);
   background-color: transparent;
 
+  &.activated {
+    opacity: 0.4;
+    background-color: transparent;
+  }
+
   &:hover:not(.disable-hover) {
     opacity: 0.6;
     color: color-shade($button-ios-color);
@@ -170,6 +192,14 @@ $button-ios-small-padding:            0.9em !default;
 
 }
 
+// iOS Round Button
+// --------------------------------------------------
+
+.button-round {
+  padding: $button-round-padding;
+  border-radius: $button-round-border-radius;
+}
+
 
 // Generate iOS Button Colors
 // --------------------------------------------------
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 5c3e9c5839..1c69af9b15 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -4,8 +4,8 @@
 // Material Design Button
 // --------------------------------------------------
 
-$button-md-margin:                        0.4rem 0.2rem !default;
-$button-md-padding:                       0 1.1em !default;
+$button-md-margin:                         0.4rem 0.2rem !default;
+$button-md-padding:                        0 1.1em !default;
 $button-md-font-size:                      1.4rem !default;
 $button-md-height:                         3.6rem !default;
 $button-md-box-shadow:                     0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
@@ -32,6 +32,7 @@ $button-md-large-padding:                  1.0em !default;
 $button-md-small-font-size:                1.3rem !default;
 $button-md-small-height:                   2.1em !default;
 $button-md-small-padding:                  0.9em !default;
+$button-md-small-icon-font-size:           1.4em !default;
 
 
 // Material Design Default Button
@@ -40,11 +41,7 @@ $button-md-small-padding:                  0.9em !default;
 .button {
   margin: $button-md-margin;
   padding: $button-md-padding;
-
   min-height: $button-md-height;
-  font-size: $button-md-font-size;
-
-  border: 0;
   border-radius: $button-md-border-radius;
 
   font-weight: 500;
@@ -66,6 +63,7 @@ $button-md-small-padding:                  0.9em !default;
 
   &.activated {
     box-shadow: $button-md-box-shadow-active;
+    background-color: $button-md-color-activated;
   }
 }
 
@@ -84,6 +82,7 @@ $button-md-small-padding:                  0.9em !default;
 
     &.activated {
       opacity: 1;
+      background-color: $bg-color-activated;
     }
   }
 
@@ -105,12 +104,20 @@ $button-md-small-padding:                  0.9em !default;
   font-size: $button-md-small-font-size;
 }
 
+.button-small.button-icon-only icon {
+  font-size: $button-md-small-icon-font-size;
+}
+
 
 // Material Design Full Button
 // --------------------------------------------------
 
 .button-full {
   border-radius: 0;
+  margin-right: 0;
+  margin-left: 0;
+  border-right-width: 0;
+  border-left-width: 0;
 }
 
 
@@ -118,7 +125,9 @@ $button-md-small-padding:                  0.9em !default;
 // --------------------------------------------------
 
 .button-outline {
-  border: 1px solid $button-md-color;
+  border-width: 1px;
+  border-style: solid;
+  border-color: $button-md-color;
   background-color: transparent;
   color: $button-md-color;
   box-shadow: none;
@@ -127,6 +136,7 @@ $button-md-small-padding:                  0.9em !default;
     opacity: 1;
     color: $background-md-color;
     background-color: $button-md-color;
+    box-shadow: none;
   }
 
   md-ripple {
@@ -166,8 +176,12 @@ $button-md-small-padding:                  0.9em !default;
   color: color-shade($button-md-color);
 
   &.activated {
-    opacity: 0.4;
     background-color: $button-md-clear-active-background-color;
+    box-shadow: none;
+  }
+
+  &:hover:not(.disable-hover) {
+    color: color-shade($button-md-color);
   }
 }
 
@@ -183,9 +197,10 @@ $button-md-small-padding:                  0.9em !default;
     background-color: transparent;
     color: $fg-color;
 
+
     &.activated {
-      opacity: 0.4;
-      background-color: transparent;
+      background-color: $button-md-clear-active-background-color;
+      box-shadow: none;
     }
 
     &:hover:not(.disable-hover) {
diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss
index 50dbafa0c3..828c72f4d1 100644
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -4,14 +4,24 @@
 // iOS Radio
 // --------------------------------------------------
 
-$radio-ios-color-on:       map-get($colors-ios, primary) !default;
+$radio-ios-color-on:               map-get($colors-ios, primary) !default;
 
+$radio-ios-icon-width:             16px !default;
+$radio-ios-icon-height:            21px !default;
+$radio-ios-icon-border-width:      2px !default;
+$radio-ios-icon-border-style:      solid !default;
 
 ion-radio {
 
-  &[aria-checked=true] radio-icon:after {
+  &[aria-checked=true] {
+    color: $radio-ios-color-on;
+  }
+
+  &[aria-checked=true] .radio-icon:after {
     position: absolute;
-    border: 2px solid $radio-ios-color-on;
+    border-width: $radio-ios-icon-border-width;
+    border-style: $radio-ios-icon-border-style;
+    border-color: $radio-ios-color-on;
     top: 3px;
     left: 7px;
     width: 4px;
@@ -22,26 +32,22 @@ ion-radio {
     transform: rotate(45deg);
   }
 
-  &[aria-checked=true] {
-    color: $radio-ios-color-on;
-  }
-
   &.item.activated {
     background-color: $list-ios-background-color;
   }
 
 }
 
-media-radio {
+.radio-media {
   display: block;
   margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
 }
 
-radio-icon {
+.radio-icon {
   position: relative;
   display: block;
-  width: 16px;
-  height: 21px;
+  width: $radio-ios-icon-width;
+  height: $radio-ios-icon-height;
 }
 
 
@@ -52,7 +58,7 @@ radio-icon {
 
   ion-radio[#{$color-name}] {
 
-    &[aria-checked=true] radio-icon:after {
+    &[aria-checked=true] .radio-icon:after {
       border-color: $color-value;
     }
 
diff --git a/ionic/components/radio/modes/md.scss b/ionic/components/radio/modes/md.scss
index 43a1a39e6d..bf65f50332 100644
--- a/ionic/components/radio/modes/md.scss
+++ b/ionic/components/radio/modes/md.scss
@@ -5,57 +5,62 @@
 // --------------------------------------------------
 
 $radio-md-color-on:               map-get($colors-md, primary) !default;
-
-$radio-md-icon-size:              16px !default;
-$radio-md-border-width:           2px !default;
 $radio-md-color-off:              darken($list-md-border-color, 40%) !default;
 
+$radio-md-icon-width:             16px !default;
+$radio-md-icon-height:            16px !default;
+$radio-md-icon-border-width:      2px !default;
+$radio-md-icon-border-style:      solid !default;
+$radio-md-icon-border-radius:     50% !default;
+
 $radio-md-transition-duration:    280ms !default;
 $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
 
 
 ion-radio {
 
-  radio-icon {
-    position: relative;
-    top: 0;
-    left: 0;
-    display: block;
-    width: $radio-md-icon-size;
-    height: $radio-md-icon-size;
-    margin: 0;
-    border: $radio-md-border-width solid $radio-md-color-off;
-    border-radius: 50%;
+  &[aria-checked=true] {
+    color: $radio-md-color-on;
   }
 
-  &[aria-checked=true] radio-icon {
+  &[aria-checked=true] .radio-icon {
     border-color: $radio-md-color-on;
+
+    &:after {
+      transform: scale3d(1, 1, 1);
+    }
   }
 
-  radio-icon:after {
+}
+
+.radio-icon {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: block;
+  width: $radio-md-icon-width;
+  height: $radio-md-icon-height;
+  margin: 0;
+  border-width: $radio-md-icon-border-width;
+  border-style: $radio-md-icon-border-style;
+  border-color: $radio-md-color-off;
+  border-radius: $radio-md-icon-border-radius;
+
+  &:after {
     position: absolute;
-    top: $radio-md-border-width;
-    left: $radio-md-border-width;
-    width: $radio-md-icon-size / 2;
-    height: $radio-md-icon-size / 2;
-    background: $radio-md-color-on;
+    top: $radio-md-icon-border-width;
+    left: $radio-md-icon-border-width;
+    width: $radio-md-icon-width / 2;
+    height: $radio-md-icon-height / 2;
+    background-color: $radio-md-color-on;
     border-radius: 50%;
     content: '';
     transition: transform $radio-md-transition-duration $radio-md-transition-easing;
     transform: scale3d(0, 0, 0);
   }
-
-  &[aria-checked=true] radio-icon:after {
-    transform: scale3d(1, 1, 1);
-  }
-
-  &[aria-checked=true] {
-    color: $radio-md-color-on;
-  }
-
 }
 
-media-radio {
+.radio-media {
   display: block;
   margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2);
 }
@@ -68,18 +73,18 @@ media-radio {
 
   ion-radio[#{$color-name}] {
 
-    &[aria-checked=true] radio-icon {
-      border-color: $color-value;
-    }
-
-    &[aria-checked=true] radio-icon:after {
-      background: $color-value;
-    }
-
     &[aria-checked=true] {
       color: $color-value;
     }
 
+    &[aria-checked=true] .radio-icon {
+      border-color: $color-value;
+
+      &:after {
+        background-color: $color-value;
+      }
+    }
+
   }
 
 }
diff --git a/ionic/components/radio/radio.scss b/ionic/components/radio/radio.scss
index 6fcf12120d..3bfc2f3f90 100644
--- a/ionic/components/radio/radio.scss
+++ b/ionic/components/radio/radio.scss
@@ -3,15 +3,17 @@
 // Radio
 // --------------------------------------------------
 
+$radio-disabled-opacity:       0.5 !default;
+$radio-disabled-text-color:    $subdued-text-color !default;
+
 
 ion-radio {
-  display: block;
   cursor: pointer;
   @include user-select-none();
 }
 
 ion-radio[aria-disabled=true] {
-  opacity: 0.5;
-  color: $subdued-text-color;
+  opacity: $radio-disabled-opacity;
+  color: $radio-disabled-text-color;
   pointer-events: none;
 }
diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts
index b331ff4615..e15a4b6dbc 100644
--- a/ionic/components/radio/radio.ts
+++ b/ionic/components/radio/radio.ts
@@ -162,7 +162,7 @@ export class RadioGroup extends Ion {
  *   Radio Label
  * </ion-radio>
  * ```
- * 
+ *
  * @see {@link /docs/v2/components#radio Radio Component Docs}
  */
 @Component({
@@ -189,9 +189,9 @@ export class RadioGroup extends Ion {
       '<ion-item-content id="{{labelId}}">' +
         '<ng-content></ng-content>' +
       '</ion-item-content>' +
-      '<media-radio>' +
-        '<radio-icon></radio-icon>' +
-      '</media-radio>' +
+      '<div class="radio-media">' +
+        '<div class="radio-icon"></div>' +
+      '</div>' +
     '</div>'
 })
 export class RadioButton extends Ion {