diff --git a/docs/_sass/_s2-docs-buttons.scss b/docs/_sass/_s2-docs-buttons.scss
new file mode 100644
index 00000000..a2af9b13
--- /dev/null
+++ b/docs/_sass/_s2-docs-buttons.scss
@@ -0,0 +1,18 @@
+.btn-outline-inverse {
+  color: #428BCA;
+  background-color: transparent;
+  border-color: #428BCA;
+  padding: 15px 30px;
+  font-size: 20px;
+  transition: all .1s ease-in-out;
+
+  &:hover {
+    color: #fff;
+    border-color: #428BCA;
+    background-color: #428BCA;
+  }
+
+  .fa {
+    margin-right: 8px;
+  }
+}
diff --git a/docs/css/s2-docs.scss b/docs/css/s2-docs.scss
index 2c51348a..2d4a171b 100644
--- a/docs/css/s2-docs.scss
+++ b/docs/css/s2-docs.scss
@@ -10,6 +10,7 @@
 @import "s2-docs-home";
 @import "s2-docs-examples";
 @import "s2-docs-social";
+@import "s2-docs-buttons";
 @import "anchorjs";
 @import "jumbotron";
 @import "prettify";
@@ -18,23 +19,6 @@
   margin-bottom: 20px;
 }
 
-.btn-outline-inverse {
-  color: #428BCA;
-  background-color: transparent;
-  border-color: #428BCA;
-  padding: 15px 30px;
-  font-size: 20px;
-}
-
-.btn-outline-inverse .fa {
-  margin-right: 8px;
-}
-
-.btn-outline-inverse:hover {
-  color: #fff;
-  border-color: #428BCA;
-  background-color: #428BCA;
-}
 
 .version {
   color: #999;