Button by kheshore

1.btn-conteiner {
2  display: flex;
3  justify-content: center;
4  --color-text: #9ee5fa;
5  --color-background: #353535;
6  --color-outline: #9ee5fa80;
7  --color-shadow: #00000080;
8}
9
10.btn-content {
11  display: flex;
12  align-items: center;
13  padding: 0px 3px;
14  text-decoration: none;
15  font-family: "Poppins", sans-serif;
16  font-size: 25px;
17  color: var(--color-text);
18  background: var(--color-background);
19  transition: 1s;
20  border-radius: 100px;
21  box-shadow: 0 0 0.2em 0 var(--color-background);
22}
23
24.btn-content:hover,
25.btn-content:focus {
26  transition: 0.5s;
27  -webkit-animation: btn-content 1s;
28  animation: btn-content 1s;
29  outline: 0.1em solid transparent;
30  outline-offset: 0.2em;
31  box-shadow: 0 0 0.4em 0 var(--color-background);
32}
33
34.btn-content .icon-arrow {
35  transition: 0.5s;
36  margin-right: 0px;
37  transform: scale(0.6);
38}
39
40.btn-content:hover .icon-arrow {
41  transition: 0.5s;
42  margin-right: 25px;
43}
44
45.icon-arrow {
46  width: 20px;
47  margin-left: 15px;
48  position: relative;
49  top: 6%;
50}
51
52/* SVG */
53#arrow-icon-one {
54  transition: 0.4s;
55  transform: translateX(-60%);
56}
57
58#arrow-icon-two {
59  transition: 0.5s;
60  transform: translateX(-30%);
61}
62
63.btn-content:hover #arrow-icon-three {
64  animation: color_anim 1s infinite 0.2s;
65}
66
67.btn-content:hover #arrow-icon-one {
68  transform: translateX(0%);
69  animation: color_anim 1s infinite 0.6s;
70}
71
72.btn-content:hover #arrow-icon-two {
73  transform: translateX(0%);
74  animation: color_anim 1s infinite 0.4s;
75}
76
77/* SVG animations */
78@keyframes color_anim {
79  0% {
80    fill: white;
81  }
82
83  50% {
84    fill: var(--color-background);
85  }
86
87  100% {
88    fill: #9ee5fa;
89  }
90}
91
92/* Button animations */
93@-webkit-keyframes btn-content {
94  0% {
95    outline: 0.2em solid var(--color-background);
96    outline-offset: 0;
97  }
98}
99
100@keyframes btn-content {
101  0% {
102    outline: 0.2em solid var(--color-background);
103    outline-offset: 0;
104  }
105}
106