HTML / CSS Кнопка Hover сдвигает все остальное? - PullRequest
Новая
       31

HTML / CSS Кнопка Hover сдвигает все остальное?

1 голос
/ 19 февраля 2020

Если я наведу курсор на мои кнопки, они сместят (?) Другие элементы.

, как вы можете видеть, я уже пытался компенсировать +4 пикселя от границы, вычитая их из высоты и ширины, но проблема остается.

Я не хочу этого. Я хочу, чтобы это изменило внешний вид без каких-либо изменений.

Вот видео, чтобы визуализировать мою проблему

Заранее спасибо:)

Здесь CSS и 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="images\illustration-hero.svg" alt="Hero image">

Кнопка входа в систему: 

.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 Кнопки: 

.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;
}

Ответы [ 3 ]

2 голосов
/ 19 февраля 2020

Вместо добавления 2px границы при наведении курсора используйте box-shadow. Это не влияет на физический размер элементов. 

.btn-1:hover, .btn-2:hover {
  background-color: white;
  box-shadow: 0px 0px 0px 2px var(--SoftBlue);
  height: 44px;
  width: 161px;
}
0 голосов
/ 20 февраля 2020

Другой простой вариант - просто изменить цвет рамки при наведении вместо добавления границы, которая не существует большую часть времени.

Рассмотрим: 

.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>
0 голосов
/ 19 февраля 2020

Вы должны добавить backface-visibility: hidden; в свой класс заголовка, и он будет работать

...