1button {
2  background: transparent;
3  color: #fff;
4  font-size: 17px;
5  text-transform: uppercase;
6  font-weight: 600;
7  border: none;
8  padding: 20px 30px;
9  perspective: 30rem;
10  border-radius: 10px;
11  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.308);
12}
13
14button::before {
15  content: '';
16  display: block;
17  position: absolute;
18  width: 100%;
19  height: 100%;
20  top: 0;
21  left: 0;
22  border-radius: 10px;
23  background: linear-gradient(320deg, rgba(0, 140, 255, 0.678), rgba(128, 0, 128, 0.308));
24  z-index: 1;
25  transition: background 3s;
26}
27
28button:hover::before {
29  animation: rotate 1s;
30  transition: all .5s;
31}
32
33@keyframes rotate {
34  0% {
35    transform: rotateY(180deg);
36  }
37
38  100% {
39    transform: rotateY(360deg);
40  }
41}