1.btn-cssbuttons {
2 --btn-color: #275efe;
3 position: relative;
4 padding: 16px 32px;
5 font-family: Roboto, sans-serif;
6 font-weight: 500;
7 font-size: 16px;
8 line-height: 1;
9 color: white;
10 background: none;
11 border: none;
12 outline: none;
13 overflow: hidden;
14 cursor: pointer;
15 filter: drop-shadow(0 2px 8px rgba(39, 94, 254, 0.32));
16 transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
17}
18
19.btn-cssbuttons::before {
20 position: absolute;
21 content: "";
22 top: 0;
23 left: 0;
24 z-index: -1;
25 width: 100%;
26 height: 100%;
27 background: var(--btn-color);
28 border-radius: 24px;
29 transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
30}
31
32.btn-cssbuttons span,
33.btn-cssbuttons span span {
34 display: inline-flex;
35 vertical-align: middle;
36 transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
37}
38
39.btn-cssbuttons span {
40 transition-delay: 0.05s;
41}
42
43.btn-cssbuttons span:first-child {
44 padding-right: 7px;
45}
46
47.btn-cssbuttons span span {
48 margin-left: 8px;
49 transition-delay: 0.1s;
50}
51
52.btn-cssbuttons ul {
53 position: absolute;
54 top: 50%;
55 left: 0;
56 right: 0;
57 display: flex;
58 margin: 0;
59 padding: 0;
60 list-style-type: none;
61 transform: translateY(-50%);
62}
63
64.btn-cssbuttons ul li {
65 flex: 1;
66}
67
68.btn-cssbuttons ul li a {
69 display: inline-flex;
70 vertical-align: middle;
71 transform: translateY(55px);
72 transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
73}
74
75.btn-cssbuttons ul li a:hover {
76 opacity: 0.5;
77}
78
79.btn-cssbuttons:hover::before {
80 transform: scale(1.2);
81}
82
83.btn-cssbuttons:hover span,
84.btn-cssbuttons:hover span span {
85 transform: translateY(-55px);
86}
87
88.btn-cssbuttons:hover ul li a {
89 transform: translateY(0);
90}
91
92.btn-cssbuttons:hover ul li:nth-child(1) a {
93 transition-delay: 0.15s;
94}
95
96.btn-cssbuttons:hover ul li:nth-child(2) a {
97 transition-delay: 0.2s;
98}
99
100.btn-cssbuttons:hover ul li:nth-child(3) a {
101 transition-delay: 0.25s;
102}