Button by stlyash

1button {
2  margin: 0.5cm;
3}
4.Btn {
5  width: 45px;
6  height: 45px;
7  display: flex;
8  align-items: center;
9  justify-content: center;
10  border: none;
11  background-color: transparent;
12  position: relative;
13  /* overflow: hidden; */
14  border-radius: 7px;
15  cursor: pointer;
16  transition: all 0.3s;
17}
18
19.svgContainer {
20  width: 100%;
21  height: 100%;
22  display: flex;
23  align-items: center;
24  justify-content: center;
25  background-color: transparent;
26  backdrop-filter: blur(0px);
27  letter-spacing: 0.8px;
28  border-radius: 10px;
29  transition: all 0.3s;
30  border: 1px solid rgba(156, 156, 156, 0.466);
31}
32
33.BG {
34  position: absolute;
35  content: "";
36  width: 100%;
37  height: 100%;
38  background: #24a1de;
39  z-index: -1;
40  border-radius: 10px;
41  pointer-events: none;
42  transition: all 0.3s;
43}
44
45.Btn:hover .BG {
46  transform: rotate(35deg);
47  transform-origin: bottom;
48}
49
50.Btn:hover .svgContainer {
51  border: 1px solid rgba(226, 226, 226, 0.466);
52  background-color: rgba(204, 204, 204, 0.466);
53  backdrop-filter: blur(4px);
54}
55
56.Btntwit {
57  width: 45px;
58  height: 45px;
59  display: flex;
60  align-items: center;
61  justify-content: center;
62  border: none;
63  background-color: transparent;
64  position: relative;
65  /* overflow: hidden; */
66  border-radius: 7px;
67  cursor: pointer;
68  transition: all 0.3s;
69}
70
71.svgContainertwit {
72  width: 100%;
73  height: 100%;
74  display: flex;
75  align-items: center;
76  justify-content: center;
77  background-color: transparent;
78  backdrop-filter: blur(0px);
79  letter-spacing: 0.8px;
80  border-radius: 10px;
81  transition: all 0.3s;
82  border: 1px solid rgba(156, 156, 156, 0.466);
83}
84
85.BGtwit {
86  position: absolute;
87  content: "";
88  width: 100%;
89  height: 100%;
90  background: #181818;
91  z-index: -1;
92  border-radius: 10px;
93  pointer-events: none;
94  transition: all 0.3s;
95}
96
97.Btntwit:hover .BGtwit {
98  transform: rotate(35deg);
99  transform-origin: bottom;
100}
101
102.Btntwit:hover .svgContainertwit {
103  background-color: rgba(156, 156, 156, 0.466);
104  backdrop-filter: blur(4px);
105}
106
107.Btninsta {
108  width: 45px;
109  height: 45px;
110  display: flex;
111  align-items: center;
112  justify-content: center;
113  border: none;
114  background-color: transparent;
115  position: relative;
116  /* overflow: hidden; */
117  border-radius: 3px;
118  cursor: pointer;
119  transition: all 0.3s;
120}
121
122.svgContainerinsta {
123  width: 100%;
124  height: 100%;
125  display: flex;
126  align-items: center;
127  justify-content: center;
128  background-color: transparent;
129  backdrop-filter: blur(4px);
130  letter-spacing: 0.8px;
131  border-radius: 10px;
132  transition: all 0.3s;
133  border: 1px solid rgba(156, 156, 156, 0.466);
134}
135
136.BGinsta {
137  position: absolute;
138  content: "";
139  width: 100%;
140  height: 100%;
141  background: #f09433;
142  background: -moz-linear-gradient(
143    45deg,
144    #f09433 0%,
145    #e6683c 25%,
146    #dc2743 50%,
147    #cc2366 75%,
148    #bc1888 100%
149  );
150  background: -webkit-linear-gradient(
151    45deg,
152    #f09433 0%,
153    #e6683c 25%,
154    #dc2743 50%,
155    #cc2366 75%,
156    #bc1888 100%
157  );
158  background: linear-gradient(
159    45deg,
160    #f09433 0%,
161    #e6683c 25%,
162    #dc2743 50%,
163    #cc2366 75%,
164    #bc1888 100%
165  );
166  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
167  z-index: -1;
168  border-radius: 9px;
169  pointer-events: none;
170  transition: all 0.3s;
171}
172
173.Btninsta:hover .BGinsta {
174  transform: rotate(35deg);
175  transform-origin: bottom;
176}
177
178.Btninsta:hover .svgContainerinsta {
179  background-color: rgba(156, 156, 156, 0.466);
180}
181
182.Btnstock {
183  width: 45px;
184  height: 45px;
185  display: flex;
186  align-items: center;
187  justify-content: center;
188  border: none;
189  background-color: transparent;
190  position: relative;
191  /* overflow: hidden; */
192  border-radius: 7px;
193  cursor: pointer;
194  transition: all 0.3s;
195}
196
197.svgContainerstock {
198  width: 100%;
199  height: 100%;
200  display: flex;
201  align-items: center;
202  justify-content: center;
203  background-color: transparent;
204  backdrop-filter: blur(0px);
205  letter-spacing: 0.8px;
206  border-radius: 10px;
207  transition: all 0.3s;
208  border: 1px solid rgba(156, 156, 156, 0.466);
209}
210
211.BGstock {
212  position: absolute;
213  content: "";
214  width: 100%;
215  height: 100%;
216  background: #f48024;
217  z-index: -1;
218  border-radius: 10px;
219  pointer-events: none;
220  transition: all 0.3s;
221}
222
223.Btnstock:hover .BGstock {
224  transform: rotate(35deg);
225  transform-origin: bottom;
226}
227
228.Btnstock:hover .svgContainerstock {
229  background-color: rgba(202, 202, 202, 0.466);
230  backdrop-filter: blur(4px);
231}
232