按钮

src/views/login.vue

@@ -68,7 +68,7 @@
       <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
       <el-form-item style="width:100%;">
         <el-button
-        class="buttonClass"
+        class="btn btn-primary btn-ghost btn-shine"
           :loading="loading"
           size="medium"
           type="primary"
@@ -187,6 +187,75 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .btn {
+    --hue: 190;
+    padding: 0px!important;
+    // height:34px;
+    // line-height: 34px;
+    position: relative;
+    // padding: 1rem 3rem;
+    font-size: 1rem;
+     line-height: 30px;
+    color: white;
+    text-decoration: none;
+    text-transform: uppercase;
+    background-color:(#0389ff, 100%, 41%);
+    border: 1px solid #0389ff;
+    outline: transparent;
+    overflow: hidden;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: 0.25s;
+
+    &:hover {
+      background:( #0389ff, 100%, 31%);
+    }
+
+    &-primary {
+      --hue: 187;
+    }
+
+    &-ghost {
+      color: (#0389ff, 100%, 41%);
+      background-color: transparent;
+      border-color: (#0389ff, 100%, 41%);
+
+      &:hover {
+        color: white;
+      }
+    }
+
+    &-shine {
+      color: white;
+
+      &::before {
+        position: absolute;
+        content: "";
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+          120deg,
+          transparent,
+          hsla(var(--hue), 100%, 41%, 0.5),
+          transparent
+        );
+        transform: translateX(-100%);
+        transition: 0.6s;
+      }
+
+      &:hover {
+        background: transparent;
+        box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 41%, 0.5);
+      }
+
+      &:hover::before {
+        transform: translateX(100%);
+      }
+    }
+  }
  ::v-deep .el-input__inner{
    &:hover{
      border: #014dff 1px solid;