diff --git a/website/source/stylesheets/_header.less b/website/source/stylesheets/_header.less
index 8d56a34bb..b97c48994 100755
--- a/website/source/stylesheets/_header.less
+++ b/website/source/stylesheets/_header.less
@@ -30,7 +30,21 @@ body.page-sub{
             li > a {
                 color: black;
             }
-        }         
+        }
+        
+        .buttons.nav > li > a, .buttons.nav > li > a {
+            .transition( background-color 0.3s ease );
+        }
+
+        .buttons.nav > li > a:hover, .buttons.nav > li > a:focus {
+            background-color: black;
+            .transition( background-color 0.3s ease );
+        } 
+
+        .main-links.nav > li > a:hover, .main-links.nav > li > a:focus {
+            color: @purple;
+            .transition( color 0.3s ease );
+        }              
     }
 }
 
diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css
index 5b24c8d13..cfe51c1aa 100644
--- a/website/source/stylesheets/main.css
+++ b/website/source/stylesheets/main.css
@@ -100,6 +100,23 @@ body.page-sub #header .main-links.navbar-nav {
 body.page-sub #header .main-links.navbar-nav li > a {
   color: black;
 }
+body.page-sub #header .buttons.nav > li > a,
+body.page-sub #header .buttons.nav > li > a {
+  -webkit-transition: background-color 0.3s ease;
+  transition: background-color 0.3s ease;
+}
+body.page-sub #header .buttons.nav > li > a:hover,
+body.page-sub #header .buttons.nav > li > a:focus {
+  background-color: black;
+  -webkit-transition: background-color 0.3s ease;
+  transition: background-color 0.3s ease;
+}
+body.page-sub #header .main-links.nav > li > a:hover,
+body.page-sub #header .main-links.nav > li > a:focus {
+  color: #822ff7;
+  -webkit-transition: color 0.3s ease;
+  transition: color 0.3s ease;
+}
 #header {
   -webkit-font-smoothing: antialiased;
   position: relative;