1.btn {
2  height: 4em;
3  width: 12em;
4  display: flex;
5  align-items: center;
6  justify-content: center;
7  background: transparent;
8  border: 0px solid black;
9}
10
11.wrapper {
12  height: 2em;
13  width: 8em;
14  position: relative;
15  background: transparent;
16  display: flex;
17  justify-content: center;
18  align-items: center;
19}
20
21.text {
22  font-size: 17px;
23  z-index: 1;
24  color: #000;
25  padding: 4px 12px;
26  border-radius: 4px;
27  background: rgba(255, 255, 255, 0.7);
28  transition: all 0.5s ease;
29}
30
31.flower {
32  display: grid;
33  grid-template-columns: 1em 1em;
34  position: absolute;
35  transition: grid-template-columns 0.8s ease;
36}
37
38.flower1 {
39  top: -12px;
40  left: -13px;
41  transform: rotate(5deg);
42}
43
44.flower2 {
45  bottom: -5px;
46  left: 8px;
47  transform: rotate(35deg);
48}
49
50.flower3 {
51  bottom: -15px;
52  transform: rotate(0deg);
53}
54
55.flower4 {
56  top: -14px;
57  transform: rotate(15deg);
58}
59
60.flower5 {
61  right: 11px;
62  top: -3px;
63  transform: rotate(25deg);
64}
65
66.flower6 {
67  right: -15px;
68  bottom: -15px;
69  transform: rotate(30deg);
70}
71
72.petal {
73  height: 1em;
74  width: 1em;
75  border-radius: 40% 70% / 7% 90%;
76  background: linear-gradient(#07a6d7, #93e0ee);
77  border: 0.5px solid #96d1ec;
78  z-index: 0;
79  transition: width 0.8s ease, height 0.8s ease;
80}
81
82.two {
83  transform: rotate(90deg);
84}
85
86.three {
87  transform: rotate(270deg);
88}
89
90.four {
91  transform: rotate(180deg);
92}
93
94.btn:hover .petal {
95  background: linear-gradient(#0761d7, #93bdee);
96  border: 0.5px solid #96b4ec;
97}
98
99.btn:hover .flower {
100  grid-template-columns: 1.5em 1.5em;
101}
102
103.btn:hover .flower .petal {
104  width: 1.5em;
105  height: 1.5em;
106}
107
108.btn:hover .text {
109  background: rgba(255, 255, 255, 0.4);
110}
111
112.btn:hover div.flower1 {
113  animation: 15s linear 0s normal none infinite running flower1;
114}
115
116@keyframes flower1 {
117  0% {
118    transform: rotate(5deg);
119  }
120
121  100% {
122    transform: rotate(365deg);
123  }
124}
125
126.btn:hover div.flower2 {
127  animation: 13s linear 1s normal none infinite running flower2;
128}
129
130@keyframes flower2 {
131  0% {
132    transform: rotate(35deg);
133  }
134
135  100% {
136    transform: rotate(-325deg);
137  }
138}
139
140.btn:hover div.flower3 {
141  animation: 16s linear 1s normal none infinite running flower3;
142}
143
144@keyframes flower3 {
145  0% {
146    transform: rotate(0deg);
147  }
148
149  100% {
150    transform: rotate(360deg);
151  }
152}
153
154.btn:hover div.flower4 {
155  animation: 17s linear 1s normal none infinite running flower4;
156}
157
158@keyframes flower4 {
159  0% {
160    transform: rotate(15deg);
161  }
162
163  100% {
164    transform: rotate(375deg);
165  }
166}
167
168.btn:hover div.flower5 {
169  animation: 20s linear 1s normal none infinite running flower5;
170}
171
172@keyframes flower5 {
173  0% {
174    transform: rotate(25deg);
175  }
176
177  100% {
178    transform: rotate(-335deg);
179  }
180}
181
182.btn:hover div.flower6 {
183  animation: 15s linear 1s normal none infinite running flower6;
184}
185
186@keyframes flower6 {
187  0% {
188    transform: rotate(30deg);
189  }
190
191  100% {
192    transform: rotate(390deg);
193  }
194}