CSS background layers bug - html

Question

I am trying to implement button I took from codepen on my existing "box-list" div.
But in my form the button gets fathers background and I cant perform my original button blue background as it should be.
On the bottom of the page you can see the button outside the "box-list" how it should look.
<link rel="stylesheet" type="text/css" href="style.css">
<div class="box-list">
<!-- FREE TEXT BOX -->
<div class="box" >
<div class="box__inner">
<h1>Free Text</h1>
Get you free text processed and analyzed, and get opinion summery about.
<button class="analyzeBtn mybtn1" >hover</button>
</div>
</div>
<!-- TWITTER BOX -->
<div class="box" >
<div class="box__inner">
<h1>Twitter Search</h1>
Get Twitter post and comments about any subject you choose and analyze the dat
</div>
</div>
<div class="box" >
<div class="box__inner">
<h1>URL</h1>
Get your URL article analyzed
</div>
</div>
</div>
<button class="analyzeBtn mybtn1" >hover</button>
.box-list {
background: #119bc9;
overflow: hidden;
display: flex;
}
.box {
min-height: 300px;
color: #fff;
transition: all 0.5s;
max-height: 300px;
background-image: url('http://lorempixel.com/400/300/sports');
background-size: cover;
width: 33.33%;
}
.box__inner {
padding: 20px;
min-height: 300px;
background-color: rgba(17, 155, 201, 0.7);
}
.box:hover {
width: 150%!important;
font-size: 18px;
}
.box:nth-child(odd) {
background-image: url('/images/text.jpg');
}
.box:nth-child(odd) .box__inner{
background: rgba(71, 83, 157, 0.8);
}
.analyzeBtn {
border: 1px solid #3498db;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family: "montserrat";
margin: 10px;
transition: 0.8s;
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 5px;
}
.mybtn1 {
color: #fff;
}
.mybtn1:hover {
color: #3498db;
transform: translateY(-7px);
transition: 0.4s;
}
.analyzeBtn::before {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0%;
background: #3498db;
z-index: -1;
transition: 0.6s;
}
.mybtn1::before {
top:0;
border-radius: 0 0 50% 50%;
height: 180%;
}
.mybtn1:hover::before {
height: 0%;
}
JSfiddle example

Answer 1

You need to add z-index: 1; to the button so that it is displayed on top of the backgrounds:
.analyzeBtn {
border: 1px solid #3498db;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family: "montserrat";
margin: 10px;
transition: 0.8s;
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 5px;
z-index: 1;
}