diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 9ead7c76f3..7373bdc20a 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2955,6 +2955,8 @@ input[type="range"] {
     padding-bottom: 2px; }
 
 .button-icon {
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
   padding: 0 6px;
   min-width: initial;
   background: none;
@@ -2962,8 +2964,9 @@ input[type="range"] {
   background: none; }
   .button-icon.button:active, .button-icon.button.active {
     background: none;
-    box-shadow: none;
-    text-shadow: 0px 0px 10px #fff; }
+    border-color: transparent;
+    opacity: 0.3;
+    box-shadow: none; }
   .button-icon .icon {
     font-size: 32px; }
 
diff --git a/scss/_button.scss b/scss/_button.scss
index ca271cd816..ae7b415daa 100644
--- a/scss/_button.scss
+++ b/scss/_button.scss
@@ -126,6 +126,7 @@
 }
 
 .button-icon {
+  @include transition(opacity .1s);
   padding: 0 6px;
   min-width: initial;
   background: none;
@@ -134,8 +135,9 @@
 
   &.button:active, &.button.active {
     background: none;
+    border-color: transparent;
+    opacity: 0.3;
     box-shadow: none;
-    text-shadow: 0px 0px 10px #fff;
   }
 
   .icon {