更优雅的创建按钮的方式，例如使用单个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个span？

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是繁重工作的地方。如果您运行代码段，则很难发现它与原始代码之间的区别。

  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 selector

来实现

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

a:after {
  content: ">";
}

Answer 4

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

CodePen

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;