如何设置 html 按钮背景颜色的边距

Question

46 x 96px我有一个尺寸为、边框半径为 的引导按钮22px，当我悬停此按钮时，我想将背景颜色设置为40 x 90px。（我不想填满整个按钮）我知道这可以使用 a 来完成，box-shadow但我有不同的页面，其中使用了此按钮，并且页面颜色不同，所以我不想逐页更改框阴影颜色以匹配页面的背景颜色。有什么简单的方法可以做到这一点吗？

Answer 1

您可以利用该backgroud-clip属性来利用这一点。

background-clip CSS 属性设置元素的背景是否延伸到其边框框、内边距框或内容框下方。

将按钮的大小设置为 40 像素 x 90 像素，并添加 3 像素的填充。

然后在悬停时，设置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这将达到预期的效果，但也会在视觉上减小按钮的尺寸。从你的问题来看，尚不清楚这是否是可接受的副作用。