Button by Smit-Prajapati

1.button {
2  background: none;
3  border: none;
4}
5
6.button .bloom-container {
7  position: relative;
8  transition: all 0.2s ease-in-out;
9  border: none;
10  background: none;
11}
12
13.button .bloom-container .button-container-main {
14  width: 110px;
15  aspect-ratio: 1;
16  border-radius: 50%;
17  overflow: hidden;
18  position: relative;
19  display: grid;
20  place-content: center;
21  border-right: 5px solid white;
22  border-left: 5px solid rgba(128, 128, 128, 0.147);
23  transform: rotate(-45deg);
24  transition: all 0.5s ease-in-out;
25}
26
27.button .bloom-container .button-container-main .button-inner {
28  height: 60px;
29  aspect-ratio: 1;
30  border-radius: 50%;
31  position: relative;
32  box-shadow: rgba(100, 100, 111, 0.5) -10px 5px 10px 0px;
33  transition: all 0.5s ease-in-out;
34}
35
36.button .bloom-container .button-container-main .button-inner .back {
37  position: absolute;
38  inset: 0;
39  border-radius: 50%;
40  background: linear-gradient(60deg, rgb(1, 85, 103) 0%, rgb(147, 245, 255) 100%);
41}
42
43.button .bloom-container .button-container-main .button-inner .front {
44  position: absolute;
45  inset: 5px;
46  border-radius: 50%;
47  background: linear-gradient(60deg, rgb(0, 103, 140) 0%, rgb(58, 209, 233) 100%);
48  display: grid;
49  place-content: center;
50}
51
52.button .bloom-container .button-container-main .button-inner .front .svg {
53  fill: #ffffff;
54  opacity: 0.5;
55  width: 30px;
56  aspect-ratio: 1;
57  transform: rotate(45deg);
58  transition: all 0.2s ease-in;
59}
60
61.button .bloom-container .button-container-main .button-glass {
62  position: absolute;
63  inset: 0;
64  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.888) 100%);
65  transform: translate(0%, -50%) rotate(0deg);
66  transform-origin: bottom center;
67  transition: all 0.5s ease-in-out;
68}
69
70.button .bloom-container .bloom {
71  height: 1px;
72  width: 1px;
73  position: absolute;
74  background: white;
75}
76
77.button .bloom-container .bloom1 {
78  top: 10px;
79  right: 20px;
80  box-shadow: rgb(255, 255, 255) 0px 0px 10px 10px, rgb(255, 255, 255) 0px 0px 20px 20px;
81}
82
83.button .bloom-container .bloom2 {
84  bottom: 10px;
85  left: 20px;
86  box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 10px 10px, rgba(255, 255, 255, 0.5) 0px 0px 30px 20px;
87}
88
89.button .bloom-container:hover {
90  transform: scale(1.1);
91}
92
93.button .bloom-container:hover .button-container-main .button-glass {
94  transform: translate(0%, -40%);
95}
96
97.button .bloom-container:hover .button-container-main .button-inner .front .svg {
98  opacity: 1;
99  filter: drop-shadow(0 0 10px white);
100}
101
102.button .bloom-container:active {
103  transform: scale(0.7);
104}
105
106.button .bloom-container:active .button-container-main .button-inner {
107  transform: scale(1.2);
108}