CSS Button hover doesn't work with background-color

Question

I'm actual trying to use some button-hover effects like this one here: http://codepen.io/davidicus/pen/emgQKJ

Now I stuck because the button hover effect doesn't work when I use background-color on my div #menu.

Can someone explain to me what I'm doing wrong here?

    <div id="wrapper">
        <div id="header">
        </div>
        <div id="gradient">
        </div>
        <div id="menu">
            <a href="index.html" class="btn btn-4"><span>Startseite</span></a>
        </div>
        <div id="gradient2">
        </div>
        <div id="content">
            <div id="innerContent">
            </div>
        </div>
        <div id="footer">
            <div id="copyright"></div>
        <div>
    </div>

MyCSS:

html, body
{
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}
body
{
    background-color: #61DC00;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}
#wrapper 
{
    width:960px;
    min-height:500px;
    margin: 0 auto;
    border: 1px solid black; 
}
#menu {
    width:960px;
    height:30px;
    padding-bottom:2px;
    /* background-color: #fff;  */
}


.btn-4 {
  border: 1px solid;
  overflow: hidden;
  position: relative;
}
.btn-4 span {
  z-index: 20;
}
.btn-4:after {
  background: #F50606;
  content: "";
  height: 155px;
  left: -75px;
  position: absolute;
  top: -50px;
  -webkit-transform: rotate(35deg);
      -ms-transform: rotate(35deg);
          transform: rotate(35deg);
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: -10;
}

.btn-4:hover:after {
  left: 120%;
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

#menu div , a{
    width:120px;
    height:27px;
    color:#000000;
    float:left;
    font-weight:none;
    text-decoration:none;
    text-align:center;
    padding-top:4px;
    font-family:verdana,arial;  
    font-size:16;
}
#content {
    width:960px;
    height:660px;
    background-color:#fff;
    margin:auto;
    padding-top:20px;
}
#header 
{
    width:960px;
    height:122px;
    background-color: #fff;
    margin: 0 auto;
}
#gradient {
    height:10px;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfff4+0,dfe5d7+40,acb1ac+100 */
background: rgb(252,255,244); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(172,177,172,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(172,177,172,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(172,177,172,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#acb1ac',GradientType=0 ); /* IE6-9 */

}

#gradient2 {
    height:10px;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#acb1ac+0,dfe5d7+100,fcfff4+100 */
background: rgb(172,177,172); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(172,177,172,1) 0%, rgba(223,229,215,1) 100%, rgba(252,255,244,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(172,177,172,1) 0%,rgba(223,229,215,1) 100%,rgba(252,255,244,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(172,177,172,1) 0%,rgba(223,229,215,1) 100%,rgba(252,255,244,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#acb1ac', endColorstr='#fcfff4',GradientType=0 ); /* IE6-9 */

}

JSFIDDLE: https://jsfiddle.net/qm2cae9r/1/

Answer 1

You have .btn-4:after selector with

z-index: -10;

Remove it and nice effect will work again