css 最经典的按钮样式_css按钮样式

1. html

<div class="container">
  <div class="box"><span>Multi Box-Shadow</span></div>
</div>
1
2
3

2. css

body {
  width: 100%;
  height: 100vh;
  background: #f5f6fa;
  font-family: 'Poppins', sans-serif;
  color: #7f8fa6;
  display: grid;
  justify-content: center;
  align-items: center;
}

.container {
  width: 50%;
  height: 50%;
  display: flex;
  align-items: center;
  text-align: center;
}

.container div {
  min-width: 200px;
  padding: 50px 0;
  border-radius: 10px;
  background: #f5f6fa;
  margin-right: 100px;
}

.box {
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05), 
    0px 6px 6px rgba(0, 0, 0, 0.1),
    0px 8px 8px rgba(0, 0, 0, 0.05), 
    0px 10px 15px rgba(0, 0, 0, 0.03),
    0px 30px 30px rgba(0, 0, 0, 0.15),
    0px 70px 60px rgba(0, 0, 0, 0.15);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36