如何为 html 按钮背景颜色设置边距答案

【问题标题】：How to set a margin for a html button background color如何为 html 按钮背景颜色设置边距
【发布时间】：2020-04-15 07:40:06
【问题描述】：

我有一个尺寸为46 x 96px 和边框半径为22px 的引导按钮，当我悬停此按钮时，我想将背景颜色设置为40 x 90px。（我不想填满整个按钮）

我知道这可以使用box-shadow 来完成，但我有不同的页面，使用此按钮的页面颜色不同，所以我不想逐页更改框阴影颜色以匹配页面的背景颜色。

有什么简单的方法吗？

【问题讨论】：

您好，请提供一个描述性示例，以便我们更好地了解您想要什么并检查您已经尝试过的内容

标签： html css twitter-bootstrap button

【解决方案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;
}

&lt;div class="button"&gt;Button&lt;/div&gt;

正如您从边框看到的那样，按钮大小不会改变，而是背景不会从内容延伸到边框。

【讨论】：

【解决方案2】：

悬停时，尝试添加与按钮背景大小相匹配的透明边框6px，并根据需要更改background-color。这将产生预期的效果，但也会在视觉上减小按钮的大小。根据您的问题，尚不清楚这是否是可接受的副作用。

查看this link 以实现完全透明的边框。

【讨论】：