Instead of adding 2px border on hover, use box-shadow. It doesn’t affect the physical size of elements.
.btn-1:hover, .btn-2:hover {
background-color: white;
box-shadow: 0px 0px 0px 2px var(--SoftBlue);
height: 44px;
width: 161px;
}
Solution 1 :
Solution 2 :
You should add backface-visibility: hidden; on your header class and it will work
Solution 3 :
Another easy option is to simply change the color of the border on hover instead of adding a border that doesn’t exist most of the time.
Consider:
.button {
display:block;
float: left;
margin: 20px;
background: #dadada;
padding: 10px 15px;
border-radius: 5px;
font-size: 12px;
font-family: Helvetica, Arial, Sans-Serif;
cursor:pointer;
transition: all 0.25s ease;
box-sizing: border-box;
}
.jumpy:hover {
border: 4px solid blue;
}
.smooth {
border: 4px solid transparent;
}
.smooth:hover {
border-color: blue;
}<div class="button jumpy">Jumpy Button</div>
<div class="button smooth">Smooth Button</div>Problem :
If I hover over my buttons they shift(?) other elements.
as you can see I already tried to compensate the +4 pixels from the border by subtracting them from the height and the width but the problem remains.
I don’t want this. I want it to change appearance without any shifting.
Here a video to visualize my problem
Thank you in advance 🙂
Here the CSS and HTML
HTML:
<body>
<nav>
<img class="logo" src="images/logo-bookmark.svg" alt="Logo nav">
<div class="navElements">
<a href="#" class="nav-links">Features</a>
<a href="#" class="nav-links">Pricing</a>
<a href="#" class="nav-links">Contact</a>
<a href="#" class="nav-logo-btn">Login</a>
</div>
</nav>
<section class="header">
<div class="header-left">
<h1 class="header-heading">A Simple Bookmark Manager</h1>
<p class="header-text"> A clean and simple interface to organize your favourite websites. Open a new
browser tab and see your sites load instantly. Try it for free.</p>
<a href="#" class="btn-1">Get it on Chrome</a>
<a href="#" class="btn-2">Get it on Firefox</a>
</div>
<img class="header-img" src="imagesillustration-hero.svg" alt="Hero image">
Login Button:
.nav-logo-btn {
text-decoration: none;
color: white;
background-color: var(--SoftRed);
padding: 10px 32px;
border-radius: 5px;
text-transform: uppercase;
font-weight: 500;
font-family: "Rubik";
font-size: 12px;
letter-spacing: 2px;
}
.nav-logo-btn:hover {
color: var(--SoftRed);
background-color: white;
border: solid 2px;
padding: 8px 30px;
transition: all 0.3s;
}
Chrome/Firefox Buttons:
.btn-1, .btn-2 {
display: inline-block;
text-decoration: none;
border-radius: 5px;
text-align: center;
line-height: 48px;
height: 48px;
width: 165px;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.btn-1:hover, .btn-2:hover {
background-color: white;
border: solid 2px;
height: 44px;
width: 161px;
}
.btn-1 {
background-color: var(--SoftBlue);
color: white;
}
.btn-2 {
background-color: #f7f7f7;
color: #606068;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
left: 50px;
}
.btn-1:hover {
color: var(--SoftBlue);
}
.btn-2:hover {
color: #606068;
}
Comments
Comment posted by Entharia
Thank you for your answer, I tried it but it didn’t work. I also tried it on the buttons itself and the header-left class but that also didn’t work.