CSS
#contener {
left: calc(50% - 30px);
top: calc(50% - 50px);
position: absolute;
height: 126px;
width: 66px;
}
body {
background: #000000;
}
#elipce {
border: 3px solid white;
width: 60px;
height: 120px;
border-radius: 30px;
background: #000000;
}
#button {
position: relative;
height: 120px;
width: 40px;
left: calc(50% - 23px);
top: calc(50% - 63px);
border-radius: 20px;
border: 3px solid white;
overflow: hidden;
}
.button_r {
width: 100%;
height: 6px;
margin: 10px 0;
position: relative;
top: -122px;
animation: roll 1.8s cubic-bezier(0.75, -0.56, 0.14, 1.71) infinite normal;
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgbargba(255,255,255,0.9) 25%,rgba(120,120,120,1) 50%,rgba(255,255,255,0.9) 75%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 25%,rgba(120,120,120,1) 50%,rgba(255,255,255,0.9) 75%);
background: linear-gradient(to bottom, rgba(255,255,255,0.9) 25%,rgba(120,120,120,1) 50%,rgba(255,255,255,0.9) 75%);
}
@keyframes roll {
100%{top:-12px;}
}
#leftbutton {
border: 3px solid white;
width: 180px;
height: 215px;
border-top-left-radius: 136px;
border-top-right-radius: 20px;
position: absolute;
top: calc(50% - 90px);
right: 50%;
background: #000000;
transition: 1s background;
}
#rightbutton {
border: 3px solid white;
width: 180px;
height: 215px;
border-top-left-radius: 20px;
border-top-right-radius: 136px;
position: absolute;
top: calc(50% - 90px);
left: 50%;
background: #000000;
transition: 1s background;
}
#leftbutton:hover {
background: #505050;
transition: 0.2s background;
}
#leftbutton:active {
background: #f0f0f0;
height: 213px;
margin-top: 2px;
}
#rightbutton:hover {
background: #505050;
transition: 0.2s background;
}
#rightbutton:active {
background: #f0f0f0;
height: 213px;
margin-top: 2px;
}
