html - 模仿按钮的外观和行为

Question

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

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

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

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

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

但这行不通。即使父 .button 指定了宽度和高度，span 也不会获得这些值:JSFiddle .

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

继承的宽度是剩余空间，因为 box-sizing: border-box; 应用于父级 .button 。换句话说，width = 100px - border - padding 86px。但继承的高度不是剩余高度，而是应用到父级 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>

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

我正在寻找一个更通用的解决方案，它可以使元素像按钮一样工作(指定或不指定宽度/高度)。

---

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

Answer 1

您可以使用 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>