html - CSS按钮设计

Question

我目前正在使用 CSS 设计按钮样式，但遇到了一些障碍。前端并不是我真正的难题。

是否可以让时钟图标位于绿色区域的右侧(20 sec 文本位于下方，居中)，左侧有一个白色边框来分隔文本和图标？

演示:https://jsfiddle.net/tcj6xrLo/

例子

.btn--shadow {
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

.btn-green {
    background: #5CC63E;
    color: #fff;
    font-weight: bold;
}

.btn {
    display: inline-block;
    padding: 1.25rem 5rem;
    margin: 1rem 0;
    font-weight: 800;
    letter-spacing: 0.10rem;
    text-decoration: none;
    -webkit-appearance: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="col-md-5" style="position: relative;
							z-index: 1;">
								<a href="#" class="btn btn-green btn--shadow" style="padding: 1rem 3.5rem;float:right;">Get help now <div style="border-left:1px solid white"><i class="fa fa-clock-o" aria-hidden="true"></i><br>20 sec</div></a>
								
								</a>
							</div>

Answer 1

如果我正确理解您的需求...

您要做的第一件事是考虑您的按钮由两部分组成；左和右。这些都应该是 <div>具有相同类名的元素。因此，您需要包装您的 Get help now在<div> ，并将时钟和计时器都包裹在另一个<div>中.

在此之后，您需要制作两个元素 display: inline-block , 并给出两个元素 text-align: center和 vertical-align: middle .从这里开始，只需玩弄 margin 即可。和 padding直到你开心为止。

这是一个粗略的例子:

.btn--shadow {
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

.btn-green {
  background: #5CC63E;
  color: #fff;
  font-weight: bold;
}

.btn {
  display: inline-block;
  /*padding: 1.25rem 5rem;*/
  padding: 1.25rem 1.5rem;
  width: 300px;
  margin: 1rem 0;
  font-weight: 800;
  letter-spacing: 0.10rem;
  text-decoration: none;
  -webkit-appearance: none;
}

.btn-component {
  display: inline-block;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}

.btn-component:nth-of-type(1) {
  width: 65%;
}

.btn-component:nth-of-type(2) {
  width: 21%;
  padding-left: 20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="col-md-5" style="position: relative; z-index: 1;">
  <a href="#" class="btn btn-green btn--shadow">
    <div class="btn-component">Get help now</div>
    <div class="btn-component" style="border-left:1px solid white;">
      <i class="fa fa-clock-o" aria-hidden="true"></i>
      <br>20 sec
    </div>
  </a>
</div>

希望这对您有所帮助!