// No bacwards compatabilty yet: I'm a terrible person!
ul.menu-bar
li Watch Now
li Movies
li TV Shows
li Sports
li Kids
li Library
View Compiled
body {
background: url("https://hdqwalls.com/download/stranger-things-season-3-2019-4k-5k-38-1920x1080.jpg") center / cover no-repeat;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
}
.menu-bar {
border-radius: 25px;
height: fit-content;
display: inline-flex;
background-color: rgba(0, 0, 0, .4);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
align-items: center;
padding: 0 10px;
margin: 50px 0 0 0;
li {
list-style: none;
color: white;
font-family: sans-serif;
font-weight: bold;
padding: 12px 16px;
margin: 0 8px;
position: relative;
cursor: pointer;
white-space: nowrap;
&::before {
content: " ";
position: absolute;
top: 0;
left:0;
height:100%;
width: 100%;
z-index:-1;
transition: .2s;
border-radius: 25px;
}
&:hover {
&::before {
background: linear-gradient(to bottom, #e8edec, #d2d1d3);
box-shadow: 0px 3px 20px 0px black;
transform: scale(1.2);
}
color: black;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.