Layout issues
When I am hovering over a button, it pushes the button next to it as I have applied some styles when hovered.
Here is my code
html
<div id="header">
<h1>SOME HEADING</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis modi, praesentium maxime, iure
aliquam quo placeat dignissimos, debitis atque voluptatibus quod eaque quia! Ipsa, quod quis! Similique
veniam ab molestias!
</p>
<div id="header-buttons">
<button class="header-btn">SOME TEXT</button>
<button class="header-btn">SOME TEXT</button>
</div>
</div>
styles :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Kanit', sans-serif;
/* color: #fff; /
}
html,
body {
height: 100%;
width: 100%;
scroll-behavior: smooth;
}
#header {
/ background-color: red; /
width: 100%;
height: 450px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 40px;
/ border-top: 1px dotted white;
border-bottom: 1px dotted white; /
position: relative;
}
#header-buttons {
display: flex;
align-items: center;
justify-content: space-evenly;
gap: 25px;
}
.header-btn {
box-sizing: border-box;
position: relative;
display: inline-block;
/ Ensure buttons behave as inline-block elements /
vertical-align: middle;
/ Adjust vertical alignment if needed /
background-color: transparent;
font-weight: 500;
color: #14FFEC;
padding: 10px 15px;
outline: none;
border-radius: 5px;
border: none;
transition: all ease 0.2s;
}
.header-btn:hover {
transform: scale(1.08);
/ Use transform to scale without pushing other elements */
cursor: pointer;
border: 1px solid #14FFEC;
}
Here is my code
html
<div id="header">
<h1>SOME HEADING</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis modi, praesentium maxime, iure
aliquam quo placeat dignissimos, debitis atque voluptatibus quod eaque quia! Ipsa, quod quis! Similique
veniam ab molestias!
</p>
<div id="header-buttons">
<button class="header-btn">SOME TEXT</button>
<button class="header-btn">SOME TEXT</button>
</div>
</div>
styles :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Kanit', sans-serif;
/* color: #fff; /
}
html,
body {
height: 100%;
width: 100%;
scroll-behavior: smooth;
}
#header {
/ background-color: red; /
width: 100%;
height: 450px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 40px;
/ border-top: 1px dotted white;
border-bottom: 1px dotted white; /
position: relative;
}
#header-buttons {
display: flex;
align-items: center;
justify-content: space-evenly;
gap: 25px;
}
.header-btn {
box-sizing: border-box;
position: relative;
display: inline-block;
/ Ensure buttons behave as inline-block elements /
vertical-align: middle;
/ Adjust vertical alignment if needed /
background-color: transparent;
font-weight: 500;
color: #14FFEC;
padding: 10px 15px;
outline: none;
border-radius: 5px;
border: none;
transition: all ease 0.2s;
}
.header-btn:hover {
transform: scale(1.08);
/ Use transform to scale without pushing other elements */
cursor: pointer;
border: 1px solid #14FFEC;
}
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
