1.one-div {
2  cursor: help;
3  position: relative;
4  width: 185px;
5  height: 30px;
6  border-radius: 10px;
7  background: linear-gradient(120deg,
8    #BF66FF 0%, 
9    #6248FF 3%,
10    #00DDEB 95%
11    );
12  animation: spin 4s linear infinite;
13  transform: translateY(100px);
14  box-shadow: 0px 10px 25px -10px #4E67FB;
15  transform-style: preserve-3d;
16  transition: all 0.4s;
17}
18
19.one-div::before {
20  content: 'U';
21  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
22  font-weight: 900;
23  font-size: 200px;
24  display: inline-block;
25  background-image: linear-gradient(140deg,
26    #BF66FF 10%, 
27    #6248FF 70%,
28    #00DDEB 100%
29    );
30  background-clip: text;
31  -webkit-background-clip: text;
32  color: transparent;
33  position: absolute;
34  bottom: 10px;
35  left: -10px;
36}
37
38.one-div::after {
39  display: block;
40  content: '';
41  width: 35px;
42  height: 147px;
43  border-radius: 0 0 10px 10px;
44  background: linear-gradient(140deg,
45    #BF66FF -100%, 
46    #6248FF 40%,
47    #00DDEB 100%
48    );
49  position: absolute;
50  bottom: 50px;
51  right: 0;
52}
53
54@keyframes spin {
55  0% {
56    transform: rotateY(0deg) translateY(100%);
57  }
58
59  100% {
60    transform: rotateY(360deg) translateY(100%);
61  }
62}
63
64@keyframes spin2 {
65  0% {
66    transform: translateY(-20%) rotateY(0);
67  }
68
69  100% {
70    transform: translateY(-20%) rotateY(360deg);
71  }
72}
73
74.one-div:active {
75  cursor: wait;
76  width: 100px;
77  height: 100px;
78  border-radius: 200px;
79  animation: spin2 2.5s linear infinite;
80  background: linear-gradient(145deg,
81    #BF66FF 10%, 
82    #6248FF 50%,
83    #00DDEB 100%
84  );
85}
86
87.one-div:active::before {
88  font-size: 0px;
89  left: 10px;
90  top: 10px;
91  width: 80px;
92  height: 80px;
93  border-radius: 50%;
94  /* background: #e8e8e8; */
95  background: #212121;
96}
97
98.one-div:active::after {
99  width: 20px;
100  height: 20px;
101  background: transparent;
102  transform: rotate(45deg);
103  border: 10px solid;
104  border-image: linear-gradient(85deg,
105    #BF66FF -50%, 
106    #6248FF 80%,
107    #00DDEB 150%
108    )1;
109  border-radius: 0;
110  top: calc(50% - 20px);
111  left: calc(50% - 20px);
112}