Стилизация ховер-эффектов ссылки в виде кнопки

Рейтинг: 0Ответов: 2Опубликовано: 18.07.2023

Необходимо сделать ссылку в виде кнопки с ховер-эффектами, меняющими фоновый цвет и цвет бордера. В дефолтном состоянии и в фокусе ссылка имеет бордер отличный от фонового цвета, в состояниях hover и active цвета бордера и фона совпадают. При проверке валидатором W3C получено предупреждение "Одинаковые цвета для background-color и border-color", но в ТЗ указано что никакие ошибки и предупреждения в CSS недопустимы.

Как можно решить эту задачу, используя 100% валидный CSS?

a {
  color: inherit;
  text-decoration: none;
  outline:none;
}
.button {
  display: inline-block;
  padding: 13px 25px;
  margin-right:10px;
  font-family: sans-serif;
  font-weight: 700;
  font-size:20px;
  text-transform: uppercase;
  line-height: normal;
  color: red;
  background-color: transparent;
  border: 2px solid;
  border-color: red;
  border-radius: 50px;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.button:hover {
  color: white;
  background-color: red;
}

.button:focus:not(:active) {
  color:white;
  background-color: pink;
}
.button:active {
   color:white;
   background-color: pink;
  border-color: pink;
}
<a href="#" class = 'button'>
  Press me
</>
  
<a href="#" class = 'button'>
  Press me
</>

css button hover валидация
Источник: Stack Overflow на русском

Ответы

▲ 0

Определяйте цвет фона элемента с помощью background-color, и цвет границы с помощью border-color

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.button {
  display: inline-block;
  padding: 13px 25px;
  margin-right: 10px;
  font-family: sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  line-height: normal;
  color: red;
  background-color: transparent;
  border: 2px solid;
  border-color: red;
  border-radius: 50px;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.button:hover {
  color: blue;
  background-color: green;
  border-color: yellow;
}

.button:active {
  color: white;
  background-color: navy;
  border-color: gray;
}

.button:focus:not(:active) {
  color: white;
  background-color: pink;
}
<a href="#" class='button'>
  Press me</a>

<a href="#" class='button'>
  Press me
</a>

▲ 0

Чтобы предупреждения не было, можно при :active убирать border, но тогда вёрстка немного сломается, для исправления позиционирования сделайте следующее:

Оберните ссылки в блок и присвойте ему свойство display: flex, чтобы элементы были в одну строку.

Чтобы в .button текст был по центру кнопки, удалите свойство padding и добавьте следующие свойства:

.button {
  display: flex; //Делаем контейнер flex контейнером
  justify-content: center;  //Центрируем по горизонтали
  align-items: center; //Центрируем по вертикали
  height: 54px; //Фиксированная высота
  width: 158px; //Фиксированная ширина
  box-sizing: border-box; //Ширина и высота элемента не будут изменяться при добавлении border
}

Весь код:

.links {
  display: flex;
}

a {
  color: inherit;
  text-decoration: none;
  outline:none;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 54px;
  width: 158px;
  margin-right:10px;
  font-family: sans-serif;
  font-weight: 700;
  font-size:20px;
  text-transform: uppercase;
  line-height: normal;
  color: red;
  background-color: transparent;
  border: 2px solid;
  border-color: red;
  border-radius: 50px;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.button:hover {
  color: white;
  background-color: red;
}

.button:focus:not(:active) {
  color:white;
  background-color: pink;
}
.button:active {
   color:white;
   background-color: pink;
   border: none;
}
<div class="links">
  <a href="#" class='button'>Press me</a>

  <a href="#" class='button'>Press me</a>
<div>