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