1button {
2 font-family: inherit;
3 font-size: 20px;
4 background: #212121;
5 color: white;
6 fill: rgb(155, 153, 153);
7 padding: 0.7em 1em;
8 padding-left: 0.9em;
9 display: flex;
10 align-items: center;
11 cursor: pointer;
12 border: none;
13 border-radius: 15px;
14 font-weight: 1000;
15}
16
17button span {
18 display: block;
19 margin-left: 0.3em;
20 transition: all 0.3s ease-in-out;
21}
22
23button svg {
24 display: block;
25 transform-origin: center center;
26 transition: transform 0.3s ease-in-out;
27}
28
29button:hover {
30 background: #000;
31}
32
33button:hover .svg-wrapper {
34 transform: scale(1.25);
35 transition: 0.5s linear;
36}
37
38button:hover svg {
39 transform: translateX(1.2em) scale(1.1);
40 fill: #fff;
41}
42
43button:hover span {
44 opacity: 0;
45 transition: 0.5s linear;
46}
47
48button:active {
49 transform: scale(0.95);
50}
51
