1#br__btn {
2  text-transform: uppercase;
3  font-weight: 700;
4  font-size: 1.188rem;
5  padding: .625em 1.25em;
6  position: relative;
7  overflow: hidden;
8  border-radius: .75em;
9  border: 0;
10  color: #fff;
11  --degPrimary: 100.98deg;
12}
13
14#br__gradient {
15  position: absolute;
16  background: conic-gradient(from var(--degPrimary) at 50% 50%, #0E6CB9 -14.31deg, rgba(251, 251, 251, 0.5) 4.98deg, #1F1F1F 90.36deg, #FFFFFF 97.67deg, #151250 288.5deg, #401C73 315.27deg, #0E6CB9 345.69deg, rgba(251, 251, 251, 0.5) 364.98deg);
17  aspect-ratio: 1 / 1;
18  width: 220%;
19  bottom: -320%;
20  left: -110%;
21  border-radius: 50%;
22  z-index: 0;
23  user-select: none;
24  transition: transform 0.5s ease-in;
25}
26
27#br__btn:hover i {
28  transform: rotate(-105deg);
29}
30
31#br__btn:hover span {
32  transform: scale(0.62);
33  transition: 3s ease-in-out;
34}
35
36.star {
37  width: 1px;
38  height: 1px;
39  background-color: white;
40  display: inline-block;
41  position: absolute;
42  top: 0;
43  visibility: hidden;
44}
45
46.star:not(:hover) {
47  transition-duration: 0s;
48}
49
50.star:nth-child(2) {
51  right: 25%;
52}
53
54.star:nth-child(3) {
55  right: 60%;
56}
57
58.star:nth-child(4) {
59  right: 11%;
60}
61
62.star:nth-child(5) {
63  right: 22%;
64}
65
66.star:nth-child(6) {
67  right: 42%;
68}
69
70.star:nth-child(7) {
71  right: 62%;
72}
73
74.star:nth-child(8) {
75  right: 12%;
76}
77
78.star:nth-child(9) {
79  right: 82%;
80}
81
82#br__btn:hover .star {
83  visibility: visible;
84  top: calc(5px * var(--order)/2);
85  transition: top 1s ease-in 2s, 2s visibility ease-in 2s;
86}
87
88#br__btn:not(:hover) .txt {
89  transition-delay: 0.3s;
90  transition-duration: 0.5s;
91}
92
93.txt {
94  position: relative;
95  display: block;
96}