1button {
2 outline: 0;
3 border: 0;
4 display: flex;
5 flex-direction: column;
6 width: 100%;
7 max-width: 140px;
8 height: 50px;
9 border-radius: 0.5em;
10 box-shadow: 0 0.625em 1em 0 rgba(30, 143, 255, 0.35);
11 overflow: hidden;
12}
13
14button div {
15 transform: translateY(0px);
16 width: 100%;
17}
18
19button,
20button div {
21 transition: 0.6s cubic-bezier(.16,1,.3,1);
22}
23
24button div span {
25 display: flex;
26 align-items: center;
27 justify-content: space-between;
28 height: 50px;
29 padding: 0.75em 1.125em;
30}
31
32button div:nth-child(1) {
33 background-color: #1e90ff;
34}
35
36button div:nth-child(2) {
37 background-color: #21dc62;
38}
39
40button:hover {
41 box-shadow: 0 0.625em 1em 0 rgba(33, 220, 98, 0.35);
42}
43
44button:hover div {
45 transform: translateY(-50px);
46}
47
48button p {
49 font-size: 17px;
50 font-weight: bold;
51 color: #ffffff;
52}
53
54button:active {
55 transform: scale(0.95);
56}