1.btn {
2 padding: 0.9em 1.9em;
3 font-size: 16px;
4 border: none;
5 background: #6285f8;
6 color: white;
7 cursor: pointer;
8 position: relative;
9 z-index: 1;
10}
11
12.btn:hover {
13 color: rgb(255, 255, 255);
14}
15
16.btn::before,.btn::after {
17 content: "";
18 position: absolute;
19 top: 0%;
20 left: 0%;
21 width: 100%;
22 height: 100%;
23 background: rgba(128, 128, 128, 0.096);
24 backdrop-filter: blur(10px);
25 z-index: -1;
26 transition: all 0.4s;
27}
28
29.btn::after {
30 z-index: -2;
31 transition: all 0.4s;
32}
33
34.btn:hover::before {
35 background: rgb(0, 0, 0, 0.315);
36 border-radius: 10px;
37}
38
39.btn:hover::after {
40 background: linear-gradient(to right, #cb6ce6, #38b6ff);
41 border-radius: 10px;
42 transform: scale(1.07, 1.2) rotateX(180deg);
43}