Unify some button styles

assets/css/devportal.css

@@ -428,29 +428,6 @@ a.button {
   text-decoration: none !important;
 }
 
-.button, #request_button { /* Should be same as btn btn-primary */
-  display: inline-block;
-  font-weight: 400;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  user-select: none;
-  border: 1px solid transparent;
-  padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  border-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  color: #fff;
-  background-color: #1db4ff;
-  border-color: #1db4ff;
-}
-.button:hover {
-  background-color: #43bded;
-  -o-transition: .5s;
-  -webkit-transition: .5s;
-  transition: .5s;
-}
 
 /* Code Tabs ---------------------------------------------------------------- */
 
@@ -1041,8 +1018,36 @@ a.current {
   border-bottom: none;
 }
 
+.content a.button {
+  /* should match the bootstrap buttons */
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  vertical-align: middle;
+  text-decoration: none;
+  line-height: 1.5;
+  padding: 9px 16px;
+  transition: 0.5s;
+  box-shadow: inset 0 0 0 1px #d3d0cf;
+  color: #676463;
+  border: 1px solid #676463;
+}
+
+.content a.button::after {
+  content: " ➝";
+  padding-left: 7px;
+  transition: all .2s ease-in-out;
+  display: inline-block;
+  text-decoration: none;
+}
+
+.content a.button:hover::after {
+  padding-left: 14px;
+}
+
 #main_content_wrapper .btn-outline-secondary:hover,
-#main_content_wrapper .btn-outline-secondary:active {
+#main_content_wrapper .btn-outline-secondary:active,
+.button:hover, #request_button:hover {
   /* Undo Bootstrap styling */
   color: #1b1818;
   background-color: inherit;

assets/js/apitool-rest.js

@@ -158,7 +158,7 @@ function select_request(request) {
         $(description).html(command.description);
 
         if (command.link) {
-            $(description).append(" <a class='button btn btn-primary' href='" + 
+            $(description).append(" <a class='button btn btn-outline-secondary' href='" + 
                 DOC_BASE+command.link+"'>Read more</a>");
         }
 

assets/js/apitool-websocket.js

@@ -380,7 +380,7 @@ var urlParams;
     if (command._description) {
       //$(description).html(command._description).show();
       $(description).html(command._description);
-      $(description).append(" <a class='button btn btn-primary' href='"+command._link+"'>Read more</a>");
+      $(description).append(" <a class='button btn btn-outline-secondary' href='"+command._link+"'>Read more</a>");
     } else {
       $(description).hide();
     }

tool/template-rest-api-tool.html

@@ -31,7 +31,7 @@
                     </div>
                     <div id='request_body'></div>
                     <div id='request_options'>
-                        <a class="btn btn-primary api" id='request_button'>Send request</a>
+                        <a class="btn btn-outline-secondary api" id='request_button'>Send request</a>
                     </div>
                 </div>
                 <div id='output' class='io'>

tool/template-websocket-api-tool.html

@@ -57,7 +57,7 @@
                     <p>JSON</p>
                     <div id='request'></div>
                     <div id='request_options'>
-                        <div class="button btn btn-primary api" id='request_button'>Send request</div>
+                        <div class="button btn btn-outline-secondary api" id='request_button'>Send request</div>
                     </div>
                 </div>
                 <div id='output' class='io'>