diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss
index 1b589f631..dd05f399e 100644
--- a/ui/scss/_vars.scss
+++ b/ui/scss/_vars.scss
@@ -138,4 +138,9 @@ $text-color: #000;
 
   /* Divider */
   --divider: 1px solid rgba(0, 0, 0, 0.12);
+
+  /* Animation :) */
+  --animation-duration: 0.3s;
+  --animation-style: cubic-bezier(.55,0,.1,1);
+
 }
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index d9a4c4772..a38c2f713 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -43,6 +43,7 @@ $button-focus-shift: 12%;
 .button-block
 {
   cursor: pointer;
+  transition: background var(--animation-duration) var(--animation-style);
 }
 
 .button__content {
diff --git a/ui/scss/component/_tabs.scss b/ui/scss/component/_tabs.scss
index f2059dfef..fb484aabb 100644
--- a/ui/scss/component/_tabs.scss
+++ b/ui/scss/component/_tabs.scss
@@ -40,8 +40,8 @@ nav.sub-header
         left: 0;
         content: '';
         animation-name: activeTab;
-        animation-duration: 0.3s;
-        animation-timing-function: cubic-bezier(.55,0,.1,1);
+        animation-duration: var(--animation-duration);
+        animation-timing-function: var(--animation-style);
       }
     }
     &:hover