|
|
|
.mouse-container |
|
$w = 3rem |
|
$h = $w * 1.65 |
|
$radius = 999px |
|
|
|
position: absolute |
|
bottom: 20px |
|
right: 20px |
|
width: $w |
|
height: $h |
|
|
|
.mouse |
|
position: relative |
|
border-radius: $radius |
|
background: #fff |
|
width: 98% |
|
height: 98% |
|
margin: 1% auto |
|
box-shadow: inset 0 -.5em 2em #666 |
|
text-align: center |
|
.button |
|
$w = 10% |
|
display: inline-block |
|
position: relative |
|
top: 15% |
|
width: $w |
|
padding: 10% 0 |
|
border-radius: $radius |
|
box-shadow: inset 0 0 .5em rgba(0,0,0,.5), 0 .25em .25em #ccc |
|
animation: pulse 2s infinite |
|
|
|
|
|
@-webkit-keyframes pulse |
|
0% |
|
background: #ccc |
|
box-shadow: 0 0 1em rgba(255,0,0,0) |
|
50% |
|
background: #cc0000 |
|
box-shadow: 0 0 1em rgba(255,0,0,1) |
|
100% |
|
background: #ccc |
|
box-shadow: 0 0 1em rgba(255,0,0,0) |
|
@-moz-keyframes pulse |
|
0% |
|
background: #ccc |
|
box-shadow: 0 0 1em rgba(255,0,0,0) |
|
50% |
|
background: #cc0000 |
|
box-shadow: 0 0 1em rgba(255,0,0,1) |
|
100% |
|
background: #ccc |
|
box-shadow: 0 0 1em rgba(255,0,0,0) |
|
@-o-keyframes pulse |
|
0% |
|
background: #ccc |
|
box-shadow: 0 0 1em rgba(255,0,0,0) |
|
50% |
|
background: #cc0000 |
|
box-shadow: 0 0 1em rgba(255,0,0,1) |
|
100% |
|
background: #ccc |
|
box-shadow: 0 0 1em rgba(255,0,0,0) |
|
@keyframes pulse |
|
0% |
|
background: #ccc |
|
box-shadow: 0 0 1em rgba(255,0,0,0) |
|
50% |
|
background: #cc0000 |
|
box-shadow: 0 0 1em rgba(255,0,0,1) |
|
100% |
|
background: #ccc |
|
box-shadow: 0 0 1em rgba(255,0,0,0) |
|
|