Button by jdm-encompass

1.button {
2  background-color: #1DA1F2;
3  border: none;
4  border-radius: 50%;
5  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
6  animation: sway 2s infinite alternate;
7  width: 70px;
8  height: 70px;
9  display: flex;
10  justify-content: center;
11  align-items: center;
12  perspective: 500px;
13  transition: transform 0.5s, box-shadow 0.5s;
14}
15
16.button:hover {
17  transform: rotate(-360deg);
18  box-shadow: 0 0 20px 0 rgba(0, 0, 255, 0.5);
19}
20
21@keyframes grow {
22  0% {
23    transform: scale(1);
24  }
25
26  100% {
27    transform: scale(10);
28  }
29}
30
31@keyframes glow {
32  0% {
33    text-shadow: gold 1px 1px 1px;
34  }
35
36  100% {
37    text-shadow: gold 0 0 10px gold;
38  }
39}
40
41.icon {
42  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
43  transition: transform 0.5s;
44}
45
46.icon:hover {
47  transform: scale(1.5);
48  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.9))
49}
50
51.icon.icons8-X {
52  display: none;
53}
54
55.button:hover .icons8-Twitter-Filled {
56  display: none;
57}
58
59.button:hover .icons8-X {
60  display: block;
61  position: relative;
62  top: 3em;
63  left: 3em;
64  align: center;
65}
66
67.follow-text {
68  color: white;
69  position: relative;
70  top: 3em;
71  left: -4em;
72  transition: transform 0.5s;
73}
74
75.follow-text:hover {
76  transform: scale(1.2);
77  color: rgba(31,81,255,100);
78  filter: drop-shadow(2px 2px 4px rgba(31,81,255,2.0))
79}
80