1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
section,section div {
    /* See it in slo-mo,you can change this */
  transition-duration:.6s;
}
* {
    box-sizing:border-box;
}
html,body {
    height:100%;
}
body {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background-image:-webkit-radial-gradient(center top,circle farthest-corner,#FFFFFF 0%,#D8DFE9 100%);
    background-image:radial-gradient(circle farthest-corner at center top,#FFFFFF 0%,#D8DFE9 100%);
    overflow:hidden;
}
section,.button {
    transition-timing-function:ease;
}
section {
    display:inline-block;
    position:relative;
    padding:.375rem .375rem 0;
    height:2.5rem;
    background:#A9ADB6;
    border-radius:.25rem;
    perspective:300;
    box-shadow:0 -1px 2px #fff,inset 0 1px 2px rgba(0,0,0,.2),inset 0 .25rem 1rem rgba(0,0,0,.1);
}
.button {
    opacity:0;
}
.cover {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX