css button 点击结果

2. <!DOCTYPE html>
3. <html lang="zh-CN">
5. <head>
6.   <meta charset="UTF-8">
7.   <title>button点击效果</title>
8.   <style>
9.     #container {
10.       display: flex;
11.       align-items: center;
12.       justify-content: center;
13.     }
15.     .pushable {
16.       position: relative;
17.       background: transparent;
18.       padding: 0px;
19.       border: none;
20.       cursor: pointer;
21.       outline-offset: 4px;
22.       outline-color: deeppink;
23.       transition: filter 250ms;
24.       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
25.     }
27.     .shadow {
28.       position: absolute;
29.       top: 0;
30.       left: 0;
31.       height: 100%;
32.       width: 100%;
33.       background: hsl(226, 25%, 69%);
34.       border-radius: 8px;
35.       filter: blur(2px);
36.       will-change: transform;
37.       transform: translateY(2px);
38.       transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
39.     }
41.     .edge {
42.       position: absolute;
43.       top: 0;
44.       left: 0;
45.       height: 100%;
46.       width: 100%;
47.       border-radius: 8px;
48.       background: linear-gradient(to right,
49.           hsl(248, 39%, 39%) 0%,
50.           hsl(248, 39%, 49%) 8%,
51.           hsl(248, 39%, 39%) 92%,
52.           hsl(248, 39%, 29%) 100%);
53.     }
55.     .front {
56.       display: block;
57.       position: relative;
58.       border-radius: 8px;
59.       background: hsl(248, 53%, 58%);
60.       padding: 16px 32px;
61.       color: white;
62.       font-weight: 600;
63.       text-transform: uppercase;
64.       letter-spacing: 1.5px;
65.       font-size: 1rem;
66.       transform: translateY(-4px);
67.       transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
68.     }
70.     .pushable:hover {
71.       filter: brightness(110%);
72.     }
74.     .pushable:hover .front {
75.       transform: translateY(-6px);
76.       transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
77.     }
79.     .pushable:active .front {
80.       transform: translateY(-2px);
81.       transition: transform 34ms;
82.     }
84.     .pushable:hover .shadow {
85.       transform: translateY(4px);
86.       transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
87.     }
89.     .pushable:active .shadow {
90.       transform: translateY(1px);
91.       transition: transform 34ms;
92.     }
94.     .pushable:focus:not(:focus-visible) {
95.       outline: none;
96.     }
97.   </style>
98. </head>
100. <body>
101.   <div id="container">
102.     <button class="pushable">
103.       <span class="shadow"></span>
104.       <span class="edge"></span>
105.       <span class="front">梦雨生生</span>
106.     </button>
107.   </div>
109.   <script>
111.   </script>
112. </body>
114. </html>

复制代码