diff --git a/app/app/styles/functions.scss b/app/app/styles/functions.scss
index a18ccc45..5282693a 100644
--- a/app/app/styles/functions.scss
+++ b/app/app/styles/functions.scss
@@ -66,6 +66,7 @@
 	-moz-transition: all 0.30s ease-in-out;
 	-ms-transition: all 0.30s ease-in-out;
 	-o-transition: all 0.30s ease-in-out;
+	transition: all 0.30s ease-in-out;
 }
 
 @mixin arrow-down($color, $size)
diff --git a/app/app/styles/widget/widget-button.scss b/app/app/styles/widget/widget-button.scss
index 465447b6..31bff6e7 100644
--- a/app/app/styles/widget/widget-button.scss
+++ b/app/app/styles/widget/widget-button.scss
@@ -22,6 +22,7 @@
     border: 1px solid $color-gray;
     text-align: center;
 	@extend .no-select;
+	@include ease-in();
 
     &:hover {
         @extend .z-depth-tiny;
@@ -52,6 +53,7 @@
     border: 1px solid $color-gray;
     text-align: center;
 	@extend .no-select;
+	@include ease-in();
     font-size: 1.2rem;
 
     &:hover {
@@ -84,6 +86,7 @@
     border: 1px solid $color-stroke;
     text-align: center;
 	@extend .no-select;
+	@include ease-in();
 
     &:hover {
         @extend .z-depth-tiny;
@@ -100,8 +103,11 @@
 }
 
 .button-red-text {
-	> .material-icons {
-		color: $color-red !important;
+	&:hover {
+		> .material-icons {
+			@include ease-in();
+			color: $color-red !important;
+		}
 	}
 }
 
@@ -119,6 +125,7 @@
     vertical-align: middle;
     text-align: center;
 	@extend .no-select;
+	@include ease-in();
 	font-size: 1.2rem;
 
     > i {
@@ -144,6 +151,7 @@
     vertical-align: middle;
     text-align: center;
 	@extend .no-select;
+	@include ease-in();
 
     > i {
         color: $color-white;
@@ -173,6 +181,7 @@
     cursor: pointer;
 	border: none;
 	@extend .no-select;
+	@include ease-in();
 
     > .name {
         vertical-align: top;
@@ -234,6 +243,7 @@
     vertical-align: middle;
     -webkit-tap-highlight-color: transparent;
 	@extend .no-select;
+	@include ease-in();
 
     &:hover {
         box-shadow: none;