Как установить поле для цвета фона кнопки html

Question

У меня есть кнопка bootstrap с размерами 46 x 96px и радиусом границы 22px, при наведении курсора на эту кнопку я хочу установить цвет фона 40 x 90px. (Я не хочу заполнять всю кнопку)

Я знаю, что это можно сделать с помощью box-shadow, но у меня есть разные страницы с разными цветами страниц, где используется эта кнопка, поэтому я не хочу менять цвет рамки для каждой страницы соответствует цвету фона страницы.

Есть ли простой способ сделать это?

Answer 1

Это можно использовать с помощью свойства backgroud-clip.

Свойство background-clip CSS устанавливает, распространяется ли фон элемента под его рамкой, отступом или блоком содержимого.

MDN

Установите размер кнопки 40px x 90px и добавьте 3px отступа.

Затем при наведении установите background-clip: content-box и цвет фона будет ограничен только содержимым, а не отступом.

преувеличенный пример ниже:

body {
  background: lightgreen;
}

.button {
  height: 30px;
  width: 80px;
  border-radius: 22px;
  background: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2em;
  padding: 8px;
  border: 1px solid red;
  color: white;
}

.button:hover {
  background-clip: content-box;
}

<div class="button">Button</div>

Как видно из границы, размер кнопки не изменяется, а фон просто не распространяется на границу содержимого.

Answer 2

При наведении попробуйте добавить прозрачную рамку, соответствующую фону кнопки размером 6px, и при необходимости измените background-color. Это даст ожидаемый эффект, но также визуально уменьшит размер кнопки. Из вашего вопроса не было ясно, был ли это приемлемый побочный эффект.

Проверьте эту ссылку , чтобы реализовать полностью прозрачные границы.