1button {
2 position: relative;
3 display: inline-block;
4 cursor: pointer;
5 outline: none;
6 border: 0;
7 vertical-align: middle;
8 text-decoration: none;
9 font-family: inherit;
10 font-size: 15px;
11}
12
13button.learn-more {
14 font-weight: 600;
15 color: #382b22;
16 text-transform: uppercase;
17 padding: 1.25em 2em;
18 background: #fff0f0;
19 border: 2px solid #b18597;
20 border-radius: 0.75em;
21 -webkit-transform-style: preserve-3d;
22 transform-style: preserve-3d;
23 -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
24 transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
25}
26
27button.learn-more::before {
28 position: absolute;
29 content: '';
30 width: 100%;
31 height: 100%;
32 top: 0;
33 left: 0;
34 right: 0;
35 bottom: 0;
36 background: #f9c4d2;
37 border-radius: inherit;
38 -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
39 box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
40 -webkit-transform: translate3d(0, 0.75em, -1em);
41 transform: translate3d(0, 0.75em, -1em);
42 transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
43}
44
45button.learn-more:hover {
46 background: #ffe9e9;
47 -webkit-transform: translate(0, 0.25em);
48 transform: translate(0, 0.25em);
49}
50
51button.learn-more:hover::before {
52 -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
53 box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
54 -webkit-transform: translate3d(0, 0.5em, -1em);
55 transform: translate3d(0, 0.5em, -1em);
56}
57
58button.learn-more:active {
59 background: #ffe9e9;
60 -webkit-transform: translate(0em, 0.75em);
61 transform: translate(0em, 0.75em);
62}
63
64button.learn-more:active::before {
65 -webkit-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
66 box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
67 -webkit-transform: translate3d(0, 0, -1em);
68 transform: translate3d(0, 0, -1em);
69}