创建按钮的更优雅的方式，例如使用单个 HTML 元素

Question

我正在尝试找出是否有更优雅的方式来创建以下 HTML 按钮。

我目前正在使用 <a href="..."> 和 2 个子 <span> 元素创建它，如下所示：-

<a href="">
    <span class="box_button">Read more</span>
    <span class="box_button_arrow">&gt;</span>
</a>

CSS 如下所示：-

span.box_button {
  display: block;
  float: left;
  padding: 6px 10px 8px 10px;
  border: 4px solid white;
  color: white;
}
span.box_button_arrow {
  display: block;
  float: left;
  color: white;
  padding: 6px 10px 8px 10px;  
  border-top: 4px solid white;
  border-right: 4px solid white;
  border-bottom: 4px solid white;
}

注意箭头跨度的左侧没有边框。

这是代码笔 - http://codepen.io/bobmarksie/pen/bEPVgM

是否可以用单个 HTML 元素替换 2 个跨度？

Answer 1

您可以使用::after 来执行此操作。使用此解决方案，您可以删除 span 元素。这是您更新的示例：

div.info_box {
  float: left;
  width: 230px;
  height: 230px;
  padding: 40px;
  background: #A95563;
  color: white;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
} 
div.box_title {
  font-size: 22px;
  padding: 0px 0px 20px 0px;
}
div.box_main {
  font-size: 16px;
  line-height: 120%;
  height: 120px;
}
a.box_button {
  border:4px solid #fff;
  color:#fff;
  display:inline;
  padding:6px 10px 8px 10px;
  text-decoration:none;
}
a.box_button::after {
  border-left:4px solid #fff;
  content:">";
  margin-left:10px;
  padding:6px 0px 8px 10px;
}

<div class="info_box">
  <div class="box_title">My title</div>
  <div class="box_main">The quick brown fox jumps over the lazy dog</div>
  <a class="box_button" href="">Read more</a>
</div>

你可以在这里找到一个工作的代码笔：http://codepen.io/anon/pen/JGQYyG

Answer 2

让我们在语义上将按钮设为按钮并使用 CSS 设置样式。这是 HTML 的关键，它非常简单：

    <button class="button">
      Read more
    </button>

CSS 是完成繁重工作的地方。如果你运行代码 sn-p，很难发现这个和原来的区别。

  a {
    text-decoration: none;
  }

  button.button {
    background: transparent;
    border: 4px solid white;
    color: white;
    display: block;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 16px;
    padding: 7px 46px 7px 10px;
    position: relative;
  }

  button.button:after {
    border-left: 4px solid white;
    content: ">";
    padding: 7px 10px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0
  }

a {
  text-decoration: none;
}
div.info_box {
  float: left;
  width: 230px;
  height: 230px;
  padding: 40px;
  background: #A95563;
  color: white;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
} 
div.box_title {
  font-size: 22px;
  padding: 0px 0px 20px 0px;
}
div.box_main {
  font-size: 16px;
  line-height: 120%;
  height: 120px;
}

a {
  text-decoration: none;
}

button.button {
  background: transparent;
  border: 4px solid white;
  color: white;
  display: block;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 16px;
  padding: 7px 46px 7px 10px;
  position: relative;
}

button.button:after {
  border-left: 4px solid white;
  content: ">";
  padding: 7px 10px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0
}

<div class="info_box">
  <div class="box_title">My title</div>
  <div class="box_main">The quick brown fox jumps over the lazy dog</div>
  <a href="">
    <button class="button">
      Read more
    </button>
  </a>
</div>

Answer 3

您可以通过使用 :after 选择器来实现这一点

 <a href="">
    Read more
 </a>

a:after {
  content: ">";
}

Answer 4

删除内部跨度，使用line-height 使文本垂直居中，并使用::after 伪元素，因此您将拥有一个元素而不是3 个

CodePen

div.info_box {
  float: left; width: 230px; height: 230px; padding: 40px; background: #A95563;
  color: white; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
div.box_title { font-size: 22px; padding: 0px 0px 20px 0px; }
div.box_main { font-size: 16px; line-height: 120%; height: 120px; }

.box_button {
  display: block;
  float: left;
  line-height: 40px;
  padding: 0 0 0 10px;
  border: 4px solid white;
  color: white;
  text-decoration: none;
}
.box_button::after {
  content: '>';
  /* same value as .box_button padding-left, to have equal space on both sides */
  margin-left: 10px; 
  width: 40px;
  text-align: center;
  display: inline-block;
  border-left: 4px white solid;
}

<div class="info_box">
  <div class="box_title">My title</div>
  <div class="box_main">The quick brown fox jumps over the lazy dog</div>
  <a href="" class="box_button">
  Read more
 </a>
</div>