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 @@
+{{ .Inner }} {{ with .Get "icon"}} {{ end }}
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);