Добрый день! У меня вопрос, как убрать прыжки кнопок

Question

button {
margin: 0;
padding: 0;
border: none;
background-color: transparent;
}

.header {
display: flex;
justify-content: center;
gap: 20px;
}

.button {
font-family: sans-serif;
text-transform: uppercase;
}

.button:hover {
border: 1px solid #000;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/fonts.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="header">
        <button class="button">привет</button>
        <button class="button">привет</button>
        <button class="button">привет</button>
        </header>
</body>
</html>

Answer 1

Решение

Например вот так

button {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
}

.header {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.button {
  font-family: sans-serif;
  text-transform: uppercase;
  border: 1px solid #0000;
}

.button:hover {
  border-color: #000;
}

<header class="header">
  <button class="button">привет</button>
  <button class="button">привет</button>
  <button class="button">привет</button>
</header>

Или же вот так

button {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
}

.header {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.button {
  font-family: sans-serif;
  text-transform: uppercase;
}

.button:hover {
  outline: 1px solid #000;
}

<header class="header">
  <button class="button">привет</button>
  <button class="button">привет</button>
  <button class="button">привет</button>
</header>

БЛОГ НА HUSL

Добрый день! У меня вопрос, как убрать прыжки кнопок

Ответы (1 шт):

Решение