Button by thewizardofzen

1button {
2  --primary-color: #ffff;
3  --secondary-color: #002152;
4  --hover-color: #eceff2;
5  --arrow-width: 10px;
6  --arrow-stroke: 2px;
7  box-sizing: border-box;
8  border: 0;
9  border-radius: 50px;
10  color: var(--secondary-color);
11  padding: 1em 1.8em;
12  background: var(--primary-color);
13  display: flex;
14  transition: 0.2s background;
15  align-items: center;
16  gap: 0.6em;
17  font-weight: bold;
18}
19
20button .arrow-wrapper {
21  display: flex;
22  justify-content: center;
23  align-items: center;
24}
25
26button .arrow {
27  margin-top: 1px;
28  width: var(--arrow-width);
29  background: var(--primary-color);
30  height: var(--arrow-stroke);
31  position: relative;
32  transition: 0.2s;
33}
34
35button .arrow::before {
36  content: "";
37  box-sizing: border-box;
38  position: absolute;
39  border: solid var(--secondary-color);
40  border-width: 0 var(--arrow-stroke) var(--arrow-stroke) 0;
41  display: inline-block;
42  top: -3px;
43  right: 3px;
44  transition: 0.2s;
45  padding: 3px;
46  transform: rotate(-45deg);
47}
48
49button:hover {
50  background-color: var(--hover-color);
51}
52
53button:hover .arrow {
54  background: var(--secondary-color);
55}
56
57button:hover .arrow:before {
58  right: 0;
59}
60