模仿按钮的外观和行为

Question

我正在尝试创建一个具有按钮外观的元素。我创建了一个 .button class 来应用效果。我设法模仿了基本样式（边框、背景渐变、悬停和活动效果）。如果按钮有高度，问题是按钮文本的垂直对齐方式。

如果我没有在元素上指定高度，就不需要垂直对齐，我得到了想要的结果：JSFiddle.

但是，如果我在元素上指定高度，元素的大小（高度）会增加并且文本会停留在顶部：JSFiddle.

为了将文本垂直对齐 center/middle，我在按钮元素内添加了一个 span 并修改了 span。

.button span {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

但这不起作用。即使父级 .button 指定了宽度和高度，span 也不会获得这些值：JSFiddle.

为了解决这个问题，我将 span 的宽度和高度设置为 inherit。这在一定程度上解决了问题，但导致了另一个问题：JSFiddle.

继承的宽度是剩余的 space，因为 box-sizing: border-box; 应用于父级 .button。换句话说，width = 100px - border - padding 86px。但是继承的高度不是remaing高度，而是应用到parent的实际高度50px。这是奇怪和不一致的。文本似乎是垂直对齐的，但有点偏离。跨度也溢出 .button.

我可以删除 .button 上的 box-sizing: border-box; 来解决这个问题，并获得完美对齐的按钮文本和漂亮的按钮，但填充和边框将添加到宽度和我指定的高度。如果我想要一个 100x50 像素的按钮，我会得到 100+border+padding x 50+border+padding 像素按钮，但是垂直对齐的按钮：JSFiddle.

还有其他方法可以实现吗？

.button {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  vertical-align: top;
  -webkit-user-select: none;
  font-family: Arial;
  font-size: 13px;
  color: black;
  text-decoration: none;
  text-align: center;
  cursor: default;
  padding: 2px 6px;
  margin: 0;
  /* box-sizing: border-box; */
  border-radius: 2px;
  border-top: 1px solid rgb(166,166,166);
  border-bottom: 1px solid rgb(148,148,148);
  border-left: 1px solid rgb(157,157,157);
  border-right: 1px solid rgb(157,157,157);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAAAAACFNooQAAAAHUlEQVQI12P4wfSfiYHpP9N/KP0Pyv6Pxobw4CoBqcYYFT1E4a0AAAAASUVORK5CYII=);
  background-size: contain;
}
.button:hover {
  border-top: 1px solid rgb(123,123,123);
  border-bottom: 1px solid rgb(110,110,110);
  border-left: 1px solid rgb(116,116,116);
  border-right: 1px solid rgb(116,116,116);
}
.button:active {
  border-top: 1px solid rgb(166,166,166);
  border-bottom: 1px solid rgb(148,148,148);
  border-left: 1px solid rgb(157,157,157);
  border-right: 1px solid rgb(157,157,157);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAAAAACFNooQAAAAHUlEQVQI12O4y8TIxMDEyMQIpZmgbAhkQmPDVQIAOFkBLhpTdQIAAAAASUVORK5CYII=);
}
.button span {
  width: inherit;
  height: inherit;
  display: table-cell;
  vertical-align: middle;
}

body > * {
  width: 100px;
  height: 50px;
}

<input type="button" style="width: 150px; height: 50px" value="input">

<a href="#" class="button">anchor</a>

<a href="#" class="button"><span>a > span</span></a>

<p class="button">paragraph</p>

更新：忘记说了。我无法在跨度上设置行高。如果我有多个高度可变的按钮，我需要在所有按钮上应用不同的行高。

我正在寻找一个更通用的解决方案，它可以使元素像按钮一样工作（width/height 指定与否）。

_{我想打破 this 上的投票按钮。}

Answer 1

由于看起来您使用的是固定字体大小，因此您可以使用一些 calc 魔术和绝对定位来做到这一点：

.button span {
  display:block;
  left:0;
  right:0;
  position:absolute;
  top:calc(50% - 9px);
  text-align:center;
}

具有三种不同按钮高度的示例：https://jsfiddle.net/tLhr3ju3/1/

Answer 2

你可以用 flexbox 来实现。

  display: inline-flex;
  justify-content: center;
  align-items: center;

jsFiddle

代码片段：

.button {
  overflow: hidden;
  white-space: nowrap;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
  font-family: Arial;
  font-size: 13px;
  color: black;
  text-decoration: none;
  cursor: default;
  padding: 2px 6px;
  margin: 0;
  box-sizing: border-box;
  border-radius: 2px;
  border-top: 1px solid rgb(166, 166, 166);
  border-bottom: 1px solid rgb(148, 148, 148);
  border-left: 1px solid rgb(157, 157, 157);
  border-right: 1px solid rgb(157, 157, 157);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAAAAACFNooQAAAAHUlEQVQI12P4wfSfiYHpP9N/KP0Pyv6Pxobw4CoBqcYYFT1E4a0AAAAASUVORK5CYII=);
  background-size: contain;
}
.button:hover {
  border-top: 1px solid rgb(123, 123, 123);
  border-bottom: 1px solid rgb(110, 110, 110);
  border-left: 1px solid rgb(116, 116, 116);
  border-right: 1px solid rgb(116, 116, 116);
}
.button:active {
  border-top: 1px solid rgb(166, 166, 166);
  border-bottom: 1px solid rgb(148, 148, 148);
  border-left: 1px solid rgb(157, 157, 157);
  border-right: 1px solid rgb(157, 157, 157);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAAAAACFNooQAAAAHUlEQVQI12O4y8TIxMDEyMQIpZmgbAhkQmPDVQIAOFkBLhpTdQIAAAAASUVORK5CYII=);
}
body > * {
  width: 100px;
  height: 50px;
}

<input type="button" value="input">

<a href="#" class="button">anchor</a>

<p class="button">paragraph</p>

编辑：

从语义上讲，我宁愿使用数据属性来提供有关 HTML 元素中行为变化的额外信息。

下面是一个使用四级选择器允许在属性值中进行大小写排列的示例：（您可以从选择器中删除 i，因为它可能不受所有现代浏览器的支持。）

DEMO

[data-type="button" i] {
  overflow: hidden;
  white-space: nowrap;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
  font-family: Arial;
  font-size: 13px;
  color: black;
  text-decoration: none;
  cursor: default;
  padding: 2px 6px;
  margin: 0;
  box-sizing: border-box;
  border-radius: 2px;
  border-top: 1px solid rgb(166, 166, 166);
  border-bottom: 1px solid rgb(148, 148, 148);
  border-left: 1px solid rgb(157, 157, 157);
  border-right: 1px solid rgb(157, 157, 157);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAAAAACFNooQAAAAHUlEQVQI12P4wfSfiYHpP9N/KP0Pyv6Pxobw4CoBqcYYFT1E4a0AAAAASUVORK5CYII=);
  background-size: contain;
}
[data-type="button" i]:hover {
  border-top: 1px solid rgb(123, 123, 123);
  border-bottom: 1px solid rgb(110, 110, 110);
  border-left: 1px solid rgb(116, 116, 116);
  border-right: 1px solid rgb(116, 116, 116);
}
[data-type="button" i]:active {
  border-top: 1px solid rgb(166, 166, 166);
  border-bottom: 1px solid rgb(148, 148, 148);
  border-left: 1px solid rgb(157, 157, 157);
  border-right: 1px solid rgb(157, 157, 157);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAAAAACFNooQAAAAHUlEQVQI12O4y8TIxMDEyMQIpZmgbAhkQmPDVQIAOFkBLhpTdQIAAAAASUVORK5CYII=);
}
body > * {
  width: 100px;
  height: 50px;
}

<input type="button" value="input">

<a href="#" data-type="button">anchor</a>

<p data-type="BuTToN">paragraph</p>

模仿按钮的外观和行为

Mimic button look and behavior

html

css

button

vertical-alignment