Button by GigioBagigi0

#e8e8e8

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: #1877f2;
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

button {
  margin: 0.5cm;
}
.Btn {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  /* overflow: hidden; */
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
}

.svgContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(0px);
  letter-spacing: 0.8px;
  border-radius: 10px;
  transition: all 0.3s;
  border: 1px solid rgba(156, 156, 156, 0.466);
}

.BG {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #24a1de;
  z-index: -1;
  border-radius: 10px;
  pointer-events: none;
  transition: all 0.3s;
}

.Btn:hover .BG {
  transform: rotate(35deg);
  transform-origin: bottom;
}

.Btn:hover .svgContainer {
  border: 1px solid rgba(226, 226, 226, 0.466);
  background-color: rgba(204, 204, 204, 0.466);
  backdrop-filter: blur(4px);
}

.Btntwit {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  /* overflow: hidden; */
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
}

.svgContainertwit {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(0px);
  letter-spacing: 0.8px;
  border-radius: 10px;
  transition: all 0.3s;
  border: 1px solid rgba(156, 156, 156, 0.466);
}

.BGtwit {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #181818;
  z-index: -1;
  border-radius: 10px;
  pointer-events: none;
  transition: all 0.3s;
}

.Btntwit:hover .BGtwit {
  transform: rotate(35deg);
  transform-origin: bottom;
}

.Btntwit:hover .svgContainertwit {
  background-color: rgba(156, 156, 156, 0.466);
  backdrop-filter: blur(4px);
}

.Btninsta {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  /* overflow: hidden; */
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s;
}

.svgContainerinsta {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(4px);
  letter-spacing: 0.8px;
  border-radius: 10px;
  transition: all 0.3s;
  border: 1px solid rgba(156, 156, 156, 0.466);
}

.BGinsta {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #f09433;
  background: -moz-linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  background: -webkit-linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  z-index: -1;
  border-radius: 9px;
  pointer-events: none;
  transition: all 0.3s;
}

.Btninsta:hover .BGinsta {
  transform: rotate(35deg);
  transform-origin: bottom;
}

.Btninsta:hover .svgContainerinsta {
  background-color: rgba(156, 156, 156, 0.466);
}

.Btnstock {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  /* overflow: hidden; */
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
}

.svgContainerstock {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(0px);
  letter-spacing: 0.8px;
  border-radius: 10px;
  transition: all 0.3s;
  border: 1px solid rgba(156, 156, 156, 0.466);
}

.BGstock {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #1877f2;
  z-index: -1;
  border-radius: 10px;
  pointer-events: none;
  transition: all 0.3s;
}

.Btnstock:hover .BGstock {
  transform: rotate(35deg);
  transform-origin: bottom;
}

.Btnstock:hover .svgContainerstock {
  background-color: rgba(202, 202, 202, 0.466);
  backdrop-filter: blur(4px);
}

Toggle prefixes

107 views

Variation of abutton

Copy to Figma

107 views

Variation of abutton

Comments

MIT License

Copyright - 2024 stlyash (Yashasvi) 
Copyright - 2024 GigioBagigi0  

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.