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;
}
11 Replies
try
border: 1px solid transparent; instead of border: none;yes, and then on the
:hover, you just change the border color
also, put the cursor: pointer in the .header-button, but not in the :hover@Mannix @epic2937 thanks, it worked
you're welcome
remember: on hover, never change anything that changes the size of the element
stuff like bold or italic text, borders, spacing and stuff like that will always cause issues
Alright
You can use transforms though 😎
yes, but do they change the size of the element?
Yes i used them
transform : scale ();
i mean, does it change the layout size?
transforms visually change the size of things (or position, or rotation), but they have no impact on the layout, it's visual only
thank you
good thing i didnt add it to this list, because i was kinda unsure