Assuming that you want to get rid of the vertical scroll on the <body> element, you can add padding: 0; margin: 0 to your universal selector (*).
The reason you were getting a vertical scroll bar on the body is that the <body> element, in most user agents, has a default margin of 8 pixels. Setting margin: 0 in the universal selector (or the body declaration) will remove that default, 8px margin.
I also removed overflow:hidden; from the .btn declaration as it was serving no purpose.
* {
background: #000;
padding: 0;
margin: 0;
}
div {
display: flex;
align-items: center;
justify-content:center;
height: 100vh;
}
.btn {
display:block;
background: #0000ff;
margin: 10px;
color: #fff;
font-size: 2rem;
text-decoration: none;
text-transform: uppercase;
padding: 15px 35px;
}
.btn::before {
content:'';
position: absolute;
top: 50%;
left: 50%;
width:0;
height:0;
transform: translate(-50%, -50%);
background: lightblue;
pointer-events:none;
}
.btn:hover::before {
width:200px;
height:200px;
}
<div>
<a href="#" class="btn">
Click
</a>
</div>
The overflow in the btn wont work for the whole body you either add the overflow:hidden; in the * {} or add margin:0; padding:0;
* {
background: #000;
overflow:hidden;
}
div {
display: flex;
align-items: center;
justify-content:center;
height: 100vh;
}
.btn {
display:block;
background: #0000ff;
margin: 10px;
color: #fff;
font-size: 2rem;
text-decoration: none;
text-transform: uppercase;
padding: 15px 35px;
}
.btn::before {
content:'';
position: absolute;
top: 50%;
left: 50%;
width:0;
height:0;
transform: translate(-50%, -50%);
background: lightblue;
pointer-events:none;
}
.btn:hover::before {
width:200px;
height:200px;
}
<div>
<a href="#" class="btn">
Click
</a>
</div>
can someone point me why in this case overflow:hidden not working? I want to undurstand what am I doing wrong.
* {
background: #000;
}
div {
display: flex;
align-items: center;
justify-content:center;
height: 100vh;
}
.btn {
display:block;
background: #0000ff;
margin: 10px;
color: #fff;
font-size: 2rem;
text-decoration: none;
text-transform: uppercase;
padding: 15px 35px;
overflow:hidden;
}
.btn::before {
content:'';
position: absolute;
top: 50%;
left: 50%;
width:0;
height:0;
transform: translate(-50%, -50%);
background: lightblue;
pointer-events:none;
}
.btn:hover::before {
width:200px;
height:200px;
}
<div>
<a href="#" class="btn">
Click
</a>
</div>
