<div id="background"></div>
<button class="item" id="b1">
<div class="icon"></div>
<label>Pokémon</label>
</button>
<button class="item" id="b2">
<div class="icon"></div>
<label>Items</label>
</button>
<button class="item" id="b3">
<div class="icon"></div>
<label>Shop</label>
</button>
<button class="item" id="b4">
<div class="icon"></div>
<label>Pokédex</label>
</button>
<button id="home"></button>
<button id="close">
<div class="icon"></div>
</button>
html, body {
height: 100%;
margin: 0;
background-image: url(https://i.imgur.com/SYB112l.png);
background-size: cover;
background-repeat: no-repeat;
}
#background {
background: rgba(255,255,255,0.9);
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0.9) 0%, rgba(195,251,184,0.9) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,255,255,0.9)), color-stop(100%, rgba(195,251,184,0.9)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.9) 0%, rgba(195,251,184,0.9) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,0.9) 0%, rgba(195,251,184,0.9) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0.9) 0%, rgba(195,251,184,0.9) 100%);
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(195,251,184,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c3fbb8', GradientType=1 );
display:block;
width: 100%;
height: 100%;
opacity: 0;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
}
button{
display: block;
width: 40px;
height: 40px;
position: absolute;
bottom: 30px;
left: 0;
right: 0;
margin: auto;
border-radius: 100%;
text-align: center;
}
button label {
width: 100%;
text-transform: uppercase;
color: #1d8696;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: -22px;
font-size: 7pt;
font-weight: 600;
letter-spacing: .5px;
}
button .icon{
display: block;
width: 50px;
height: 50px;
background-size: contain;
z-index: 15;
top: -2px;
left: -2px;
position: absolute;
}
#b1 .icon{
background-image: url(https://i.imgur.com/TPjpw1X.png);
}
#b2 .icon{
background-image: url(https://i.imgur.com/ND09g0n.png);
}
#b3 .icon{
background-image: url(https://i.imgur.com/b6V4i3w.png);
}
#b4 .icon{
background-image: url(https://i.imgur.com/SpQtMSj.png);
}
#close .icon{
width: 40px;
height: 40px;
top: -2px;
left: -2px;
background-image: url(https://i.imgur.com/VxDV1ox.png);
}
input, button, submit { border:none; }
button:focus {
outline: none;
}
#home {
background-color: #ff3945;
z-index: 10;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
box-shadow: inset 0 0 0 2px rgba(212,211,211,.5), 0 0 2pt 1pt #979797;
}
#home::before{
content: '';
position: absolute;
display: block;
width: 12px;
height: 12px;
z-index: 12;
border-radius: 20px;
background-color: #b9b9b9;
border: #ffffff 3px solid;
top: 11px;
left: 11px;
}
#home::after{
content: '';
position: absolute;
display: block;
width: 40px;
height: 20px;
z-index: 11;
border-radius: 0 0 40px 40px;
background-color: #ffffff;
bottom: 0px;
left: 0px;
box-shadow: inset 0 0 0 2px rgba(212,211,211,.5);
}
#close {
background-color: rgba(255,255,255,.2);
width: 40px;
height: 40px;
bottom: 30px;
z-index: 9;
transform: scale(1.5,1.5);
opacity: 0;
-moz-transition: all .4s cubic-bezier(.19,0,0,1.45);
-webkit-transition: all .4s cubic-bezier(.19,0,0,1.45);
transition: all .4s cubic-bezier(.19,0,0,1.45);
border: rgba(192,192,192,.5) 2px solid;
}
#close:active {
background-color: rgba(190,190,190,.3);
}
#close::before {
background-color: #f0fff1;
content: '';
position: absolute;
display: block;
width: 26px;
height: 26px;
z-index: 11;
border-radius: 100%;
border: #1d8696 1px solid;
top: 4px;
left: 4px;
-moz-transition: all .4s cubic-bezier(.19,0,0,1.45);
-webkit-transition: all .4s cubic-bezier(.19,0,0,1.45);
transition: all .4s cubic-bezier(.19,0,0,1.45);
}
#close:active::before {
background-color: rgba(190,190,190,.3);
}
.item {
background-color: rgba(255,255,255,.2);
-moz-transition: all .4s cubic-bezier(.19,0,0,1.45);
-webkit-transition: all .4s cubic-bezier(.19,0,0,1.45);
transition: all .4s cubic-bezier(.19,0,0,1.45);
opacity: 0;
border: rgba(192,192,192,.5) 2px solid;
width: 50px;
height: 50px;
}
.item:active {
background-color: rgba(190,190,190,.3);
}
.item::before {
background-color: #f0fff1;
content: '';
position: absolute;
display: block;
width: 36px;
height: 36px;
z-index: 11;
border-radius: 100%;
border: #1d8696 1px solid;
top: 4px;
left: 4px;
-moz-transition: all .4s cubic-bezier(.19,0,0,1.45);
-webkit-transition: all .4s cubic-bezier(.19,0,0,1.45);
transition: all .4s cubic-bezier(.19,0,0,1.45);
}
.item:active::before {
background-color: rgba(190,190,190,.3);
}
$('#home').click(function(){
$(this).css({
'opacity': 0,
'z-index': 8
});
$('#close').css({
'opacity': 1,
'transform': 'scale(1,1)'
});
$('#background').css('opacity', 1);
$('#b1').css({
'opacity': 1,
'transform': 'translate(-80px,-30px)'
});
$('#b2').css({
'opacity': 1,
'transform': 'translate(80px,-30px)'
});
$('#b3').css({
'opacity': 1,
'transform': 'translate(0px,-100px)'
});
$('#b4').css({
'opacity': 1,
'transform': 'translate(0px,-200px)'
});
});
$('#close').click(function(){
$(this).css({
'opacity': 0,
'transform': 'scale(0,0)'
});
$('#home').css({
'opacity': 1,
'z-index': 10
});
$('#background').css('opacity', 0);
$('#b1, #b2, #b3, #b4').css({
'opacity': 0,
'transform': 'translate(0px,0px)'
});
setTimeout(function(){
$('#close').css('transform','scale(1.5,1.5)');
}, 100);
});
This Pen doesn't use any external CSS resources.