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 :)