docs: optimize button styles

Author: PeachScript

docs/.vuepress/theme/Layout.vue

@@ -10,8 +10,8 @@
       <previewer class="previewer"></previewer>
       <div class="intro-container">
         <p>An infinite scroll plugin for Vue.js</p>
-        <button class="button button-intro">Get Started</button>
-        <button class="button button-intro">View GitHub</button>
+        <button class="button button-large button-basic">Get Started</button>
+        <button class="button button-large">View GitHub</button>
         <ul class="feat-list">
           <li>
             <h3>Out of the box</h3>
@@ -32,6 +32,7 @@
 </template>
 
 <script>
+import 'focus-visible';
 import Previewer from './Previewer';
 
 export default {
@@ -42,6 +43,8 @@ export default {
 </script>
 
 <style lang="less">
+@import './less/button.less';
+
 body {
   margin: 0;
   font: 16px/1.42857 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
@@ -99,7 +102,6 @@ main.container {
     + h1 {
       top: 280px;
       left: 38%;
-      margin-top: 20px;
       margin-left: 179px;
       font-size: 32px;
     }
@@ -128,30 +130,8 @@ main.container {
     color: @c-basic-light;
   }
 
-  .button-intro {
-    padding: 16px 48px;
-    color: #fff;
-    font-size: 20px;
-    background: lighten(@c-basic, 20%);
-    border: 1px solid lighten(@c-basic, 20%);
-    border-radius: 2px;
-    cursor: pointer;
-    outline: none;
-
-    &:hover,
-    &:focus {
-      opacity: 0.9;
-    }
-
-    &:active {
-      opacity: 1;
-    }
-
-    + .button-intro {
-      margin-left: 20px;
-      color: @c-basic;
-      background: transparent;
-    }
+  .button + .button {
+    margin-left: 20px;
   }
 
   .feat-list {

docs/.vuepress/theme/less/button.less

@@ -0,0 +1,64 @@
+@import './variables.less';
+
+.button-shadow-generator(@color, @offsetx: 0) {
+  box-shadow: 0 (12px + @offsetx) 30px -10px @color,
+              0 (8px + @offsetx) 20px -20px fadein(@color, 5%);
+}
+
+.button {
+  padding: 12px 24px;
+  color: @c-basic;
+  font-size: 16px;
+  background: #fff;
+  border: 0;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.2s;
+
+  &,
+  &:active {
+    .button-shadow-generator(rgba(0, 0, 0, 0.1));
+  }
+
+  // action status
+  &:hover {
+    opacity: 0.95;
+    transform: translateY(-1px);
+    .button-shadow-generator(rgba(0, 0, 0, 0.1), 1px);
+  }
+
+  &:focus:not(.focus-visible) {
+    outline: none;
+  }
+
+  &:active {
+    opacity: 1;
+    transform: none;
+  }
+
+  // size control
+  &.button-large {
+    padding: 16px 48px;
+    font-size: 20px;
+  }
+
+  &.button-small {
+    padding: 8px 16px;
+    font-size: 14px;
+  }
+
+  // color control
+  &.button-basic {
+    color: #fff;
+    background: linear-gradient(30deg, lighten(@c-basic, 10%), lighten(@c-basic, 25%));
+
+    &,
+    &:active {
+      .button-shadow-generator(rgba(28, 90, 160, 0.5));
+    }
+
+    &:hover {
+      .button-shadow-generator(rgba(28, 90, 160, 0.5), 1px);
+    }
+  }
+}

package.json

@@ -57,6 +57,7 @@
     "eslint-loader": "^2.1.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-vue": "^4.7.1",
+    "focus-visible": "^4.1.5",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "karma": "^3.0.0",