Button by polina066

1.btn-class-name {
2  --color: 180,255, 100;
3  border-radius: .5em;
4  transition: .3s;
5  background-color: rgba(var(--color), .2);
6  color: rgb(var(--color));
7  fill: rgb(var(--color));
8  font-family: monospace;
9  font-weight: bolder;
10  font-size: x-large;
11  text-transform: uppercase;
12  letter-spacing: 0.1em;
13  cursor: pointer;
14  border: 2px solid rgb(var(--color));
15  box-shadow: 0 0 10px rgba(var(--color), .4);
16  outline: none;
17  display: flex;
18  align-items: center;
19  padding: .5em 1em;
20}
21
22.btn-class-name:hover {
23  box-shadow: 0 0 0 5px rgba(var(--color), .5);
24}
25
26.btn-class-name span {
27  transform: scale(.8);
28  transition: .3s;
29}
30
31.btn-class-name:hover span {
32  transform: scale(1);
33}
34
35.btn-class-name svg {
36  font-size: 0;
37  transform: scale(0.5) translateX(0%) rotate(-180deg);
38  transition: .3s;
39}
40
41.btn-class-name:hover svg {
42  font-size: 20px;
43  transform: scale(1) translateX(20%) rotate(0deg);
44}
45
46.btn-class-name:active {
47  transition: 0s;
48  box-shadow: 0 0 0 5px rgb(var(--color));
49}