1.button {
2  position: relative;
3  display: flex;
4  align-items: center;
5  font-family: sans-serif;
6  font-weight: bold;
7  font-size: 1em;
8  padding: 0.5em 2em;
9  border-radius: 2em;
10  border: 0 solid #fefefe;
11  background-color: #ece5d8;
12  color: #3b4255;
13  box-shadow: 0 0 9px -4px #797979;
14  transition: 100ms;
15}
16
17.button::after {
18  position: absolute;
19  content: '';
20  width: 100%;
21  height: 100%;
22  border-radius: 2em;
23  background-color: #ffdf99;
24  opacity: 0;
25  z-index: 1;
26  transition: 100ms;
27}
28
29.circle {
30  position: absolute;
31  display: flex;
32  align-items: center;
33  justify-content: center;
34  left: 0.4em;
35  height: 1.5em;
36  width: 1.5em;
37  border-radius: 1em;
38  background-color: #313131;
39}
40
41.circle::before {
42  position: absolute;
43  content: '';
44  width: 32%;
45  height: 32%;
46  border-radius: 1em;
47  border: 3px solid #ffcd33;
48}
49
50.button span {
51  z-index: 2;
52  padding-left: 1.1em;
53}
54
55.button:hover {
56  border: 3px solid #fefefe;
57  box-shadow: 0 0 5px 0 #f0f0f0, inset 0 0 3px 0 #656565;
58}
59
60.button:active {
61  border: 0 solid #fefefe;
62  color: white;
63  box-shadow: inset 0 0 5px 0 #4b4b4b;
64  opacity: .7;
65}
66
67.button:active.button::after {
68  opacity: .5;
69}