diff --git a/layouts/shortcodes/button.html b/layouts/shortcodes/button.html
new file mode 100644
index 0000000000..c56545af06
--- /dev/null
+++ b/layouts/shortcodes/button.html
@@ -0,0 +1 @@
+<a {{ with .Get "href"}} href="{{.}}" {{ end }} class="btn btn-default">{{ .Inner }} {{ with .Get "icon"}} <i class="{{.}}"></i> {{ end }}</a>
diff --git a/static/css/hugo-theme.css b/static/css/hugo-theme.css
index 7b5933c025..b4ab03349d 100644
--- a/static/css/hugo-theme.css
+++ b/static/css/hugo-theme.css
@@ -84,3 +84,55 @@
 #top-bar.is_stuck {
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
 }
+
+.btn {
+  display: inline-block !important;
+  padding: 6px 12px !important;
+  margin-bottom: 0 !important;
+  font-size: 14px !important;
+  font-weight: normal !important;
+  line-height: 1.42857143 !important;
+  text-align: center !important;
+  white-space: nowrap !important;
+  vertical-align: middle !important;
+  -ms-touch-action: manipulation !important;
+      touch-action: manipulation !important;
+  cursor: pointer !important;
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+      -ms-user-select: none !important;
+          user-select: none !important;
+  background-image: none !important;
+  border: 1px solid transparent !important;
+  border-radius: 4px !important;
+  -webkit-transition: all 0.15s !important;
+     -moz-transition: all 0.15s !important;
+          transition: all 0.15s !important;
+}
+.btn:focus {
+  /*outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;*/
+  outline: none !important;
+}
+.btn:hover,
+.btn:focus {
+  color: #2b2b2b !important;
+  text-decoration: none !important;
+}
+
+.btn-default {
+  color: #333 !important;
+  background-color: #fff !important;
+  border-color: #ccc !important;
+}
+.btn-default:hover,
+.btn-default:focus,
+.btn-default:active {
+  color: #fff !important;
+  background-color: #9e9e9e !important;
+  border-color: #9e9e9e !important;
+}
+.btn-default:active {
+  background-image: none !important;
+}
diff --git a/static/js/learn.js b/static/js/learn.js
index 8036a2237d..3fdbee2a95 100644
--- a/static/js/learn.js
+++ b/static/js/learn.js
@@ -228,8 +228,8 @@ jQuery(document).ready(function() {
       }
     });
 
-    $('#top-bar a:not(:has(img))').addClass('highlight');
-    $('#body-inner a:not(:has(img))').addClass('highlight');
+    $('#top-bar a:not(:has(img)):not(.btn)').addClass('highlight');
+    $('#body-inner a:not(:has(img)):not(.btn)').addClass('highlight');
 
     $('#toc-menu a').hover(function() {
         $('.progress').stop(true, false, true).fadeToggle(100);