feat: add button shortcode

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>

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;
+}

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);