adjust

Author: luo0412

_btns/btn-3d.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import "./btn-3d.less"
+
+
+// https://codepen.io/mudontire/pen/aeJQqB
+const App = {
+  template: `
+
+    <button class="button-3d-1">3D Button 1</button>
+  `,
+  data() {
+    return {
+      count: 0,
+    }
+  },
+  computed: {
+    plusOne: function () {
+      return this.count + 1
+    },
+  },
+  methods: {
+    increment() {
+      this.count++
+    },
+  },
+}
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})

_btns/btn-3d.less

@@ -0,0 +1,73 @@
+button{
+  display: block;
+  margin: 100px auto;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+.button-3d-1 {
+  position: relative;
+  background: orangered;
+  border: none;
+  color: white;
+  padding: 15px 24px;
+  font-size: 1.4rem;
+  /* hsl(hue, saturation, lightness) */
+  box-shadow: -6px 6px 0 hsl(16, 100%, 30%);
+  outline: none;
+}
+
+.button-3d-1:hover {
+  background: hsl(16, 100%, 45%);
+}
+
+.button-3d-1:active {
+  background: hsl(16, 100%, 40%);
+  top: 3px;
+  left: -3px;
+  box-shadow: -3px 3px 0 hsl(16, 100%, 30%);
+}
+
+.button-3d-1::before {
+  position: absolute;
+  display: block;
+  content: "";
+  height: 0;
+  width: 0;
+
+  border: 6px solid transparent;
+  border-right: 6px solid hsl(16, 100%, 30%);
+  border-left-width: 0px;
+  top: 0;
+  left: -6px;
+}
+
+.button-3d-1::after {
+  position: absolute;
+  display: block;
+  content: "";
+  height: 0;
+  width: 0;
+
+  border: 6px solid transparent;
+  border-top: 6px solid hsl(16, 100%, 30%);
+  border-bottom-width: 0px;
+  bottom: -6px;
+  right: 0;
+}
+
+.button-3d-1:active::before {
+  border: 3px solid transparent;
+  border-right: 3px solid hsl(16, 100%, 30%);
+  border-left-width: 0px;
+  left: -3px;
+}
+
+.button-3d-1:active::after {
+  border: 3px solid transparent;
+  border-top: 3px solid hsl(16, 100%, 30%);
+  border-bottom-width: 0px;
+  bottom: -3px;
+}

config/index.js

@@ -13,5 +13,6 @@ module.exports = {
   showNav: true,
 
   // entry: './__demo/**/*.js',
-  entry: './_hooks/**/*.js',
+  // entry: './_hooks/**/*.js',
+  entry: './_btns/**/*.js',
 }

yarn.lock

@@ -9259,6 +9259,11 @@ vue-loader@^15.7.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@^3.0.3:
+  version "3.4.8"
+  resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.8.tgz#2c06261d35d8075893470352d42d70b6287b8194"
+  integrity sha1-LAYmHTXYB1iTRwNS1C1wtih7gZQ=
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
@@ -9285,6 +9290,11 @@ vue@^2.6.12:
   resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
   integrity sha1-9evU+mvShpQD4pqJau1JBEVskSM=
 
+vuex@^3.1.2:
+  version "3.5.1"
+  resolved "https://registry.npm.taobao.org/vuex/download/vuex-3.5.1.tgz?cache=0&sync_timestamp=1604065489763&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvuex%2Fdownload%2Fvuex-3.5.1.tgz#f1b8dcea649bc25254cf4f4358081dbf5da18b3d"
+  integrity sha1-8bjc6mSbwlJUz09DWAgdv12hiz0=
+
 watchpack@^1.6.0:
   version "1.6.0"
   resolved "https://registry.npm.taobao.org/watchpack/download/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"