cssz-index

z-index not working as intended, wondering what is causing the issue

I am trying to make a border around a button. This border is supposed to be a gradient so i am simply trying to make a bigger button without functionality underneath the button above. For some reason, no matter what I do they won't layer the way I want them to.

Code below:

<!DOCTYPE html>
<html lang="se">
<head>
<style>


.knap{
    width: 250px;
    height: 50px;
    border-radius: 200px;
    align-content: center;
    background-color: #161a20;
    border: none;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17px;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
}

.knap::after{
content: '';
position: absolute;
height: 105%;
width: 105%;
border-radius: 200px;
background-image: linear-gradient(to bottom left, #008cff, #e100ff);
z-index: -1;
}

.wrap{
    display: flex;
    justify-content: center;
    align-items: center;
}

#b1{

margin-top: 50px;
z-index: 100;

}

</style>
</head>

<body>
<div class="wrap">
 <button class="knap" id="b1">About me</button>
</div>
</body>
</html>

I have tried changing the z-index around, i have also tried to mess around in the wrapper div but nothing works afaik.

Solution 

  • .knap{
    width: 250px;
    height: 50px;
    border-radius: 200px;
    align-content: center;
    background-color: #161a20;
    border: none;
    color: white;
    background: linear-gradient(to bottom left, #008cff, #e100ff);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17px;
    position: relative;
    z-index: 1;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
}

.knap::before{
  content: '';
  position: absolute;
  /* height: 105%;
  width: 105%; */
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  border-radius: 200px;
   background: black;
  z-index: -1;
}

.knap::after {
  content: attr(data);
  /* background: linear-gradient(to left, #00FFA3, #DC1FFF);*/
 -webkit-background-clip: text;
  color: transparent;
}


.wrap{
    display: flex;
    justify-content: center;
    align-items: center;
}
    <!DOCTYPE html>
<html lang="se">
<head>
</head>

<body>
<div class="wrap">
 <button class="knap" id="b1">About me</button>
</div>
</body>
</html>

    You nearly had it, I think maybe the display: flex and the height and width of the .knap::before at 105% were throwing you off. The main .knap class didn't have any positive z-index on it, which helped. Here you go, I changed some values but commented out yours :)