查看 | 历史 | 提交 | 提交对比
liweilong
2020-12-02 3ca1b14fc6db3e845a8109730d82a337143b567e
提交 | 用户 | age
2a61f6 1 @import './variables.scss';
L 2
3 @mixin colorBtn($color) {
4   background: $color;
5
6   &:hover {
7     color: $color;
8
9     &:before,
10     &:after {
11       background: $color;
12     }
13   }
14 }
15
16 .blue-btn {
17   @include colorBtn($blue)
18 }
19
20 .light-blue-btn {
21   @include colorBtn($light-blue)
22 }
23
24 .red-btn {
25   @include colorBtn($red)
26 }
27
28 .pink-btn {
29   @include colorBtn($pink)
30 }
31
32 .green-btn {
33   @include colorBtn($green)
34 }
35
36 .tiffany-btn {
37   @include colorBtn($tiffany)
38 }
39
40 .yellow-btn {
41   @include colorBtn($yellow)
42 }
43
44 .pan-btn {
45   font-size: 14px;
46   color: #fff;
47   padding: 14px 36px;
48   border-radius: 8px;
49   border: none;
50   outline: none;
51   transition: 600ms ease all;
52   position: relative;
53   display: inline-block;
54
55   &:hover {
56     background: #fff;
57
58     &:before,
59     &:after {
60       width: 100%;
61       transition: 600ms ease all;
62     }
63   }
64
65   &:before,
66   &:after {
67     content: '';
68     position: absolute;
69     top: 0;
70     right: 0;
71     height: 2px;
72     width: 0;
73     transition: 400ms ease all;
74   }
75
76   &::after {
77     right: inherit;
78     top: inherit;
79     left: 0;
80     bottom: 0;
81   }
82 }
83
84 .custom-button {
85   display: inline-block;
86   line-height: 1;
87   white-space: nowrap;
88   cursor: pointer;
89   background: #fff;
90   color: #fff;
91   -webkit-appearance: none;
92   text-align: center;
93   box-sizing: border-box;
94   outline: 0;
95   margin: 0;
96   padding: 10px 15px;
97   font-size: 14px;
98   border-radius: 4px;
99 }