CSS button design

Question

I am currently working on styling a button with CSS but have hit a bit of a snag. Front End isn't really my jam.

Is it possible to have the clock icon on the right (20 sec text underneath, centered) of the green area and a white border to the left that splits the text and the icon?

Demo: https://jsfiddle.net/tcj6xrLo/

Example

.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

I'd use flexbox to achieve these results. See the example below.

You need to wrap your text elements in a or for this to work. For example: <span>Get help now </span>

The key part:

.btn {
  display: inline-flex;
  align-items: center;
}

body {
  font-family: sans-serif;
}

.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;
  margin: 1rem 0;
  font-weight: 800;
  letter-spacing: 0.10rem;
  text-decoration: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
}

.btn >:first-child {
  text-align: center;
  padding: 1.25em 1.5em;
}

.btn >:last-child {
  padding: 0 1em;
  text-align: center;
  border-left: 1px solid white;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<a href="#" class="btn btn-green btn--shadow">
  <span>Get help now </span>
  <div>
    <i class="fa fa-clock-o" aria-hidden="true"></i>
    <br>20 sec
  </div>
</a>

Answer 2

If I understand what you're wanting correctly...

The first thing you'll want to do is to consider your button to be comprised of two parts; left and right. These should both be <div> elements that have the same class name. As such, you'll want to wrap your Get help now in a <div>, and wrap both the clock and the timer in the other <div>.

After this, you'll want to make both elements display: inline-block, and give both elements text-align: center and vertical-align: middle. From here it's just a matter of playing with the margin and padding until you're happy.

Here's a rough example:

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

Hope this helps!

Answer 3

I would suggest grouping the clock and time into a div, that way you can set it to display:inline-block; to get the text and the time parts on the same line, while still being able to use display:block; on the clock icon to cause it to wrap to it's own line. Then it's just a matter of setting padding-left, margin-left and border-left, as well as text-align:center; and vertical-align:middle; to hand the alignment. Something like this:

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

.button-text, .button-time {
  display:inline-block;
  vertical-align:middle;
}
  .button-time {
    border-left:1px solid white;
    padding-left:15px;
    margin-left:11px;
    text-align:center;
  }
  
.button-clock {
  display:block;
  text-align:center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<a href="#" class="btn btn-green btn--shadow">
  <span class="button-text">Get help now</span>
  <div class="button-time">
    <span class="fa fa-clock-o" aria-hidden="true"></span>
    <span class="button-clock">20 sec</span>
  </div>
</a>

Answer 4

Like this?

https://jsfiddle.net/kb8uby8v/3/

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

.btn-green {
    background: #5CC63E;
    color: #fff;
    font-weight: bold;
    padding: 1rem 3.5rem;
    float:right;
}

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

HTML

<div class="col-md-5" style="position: relative; z-index: 1;">
     <a href="#" class="btn btn-green btn--shadow">Get help now <div style="border-left:1px solid white; display:inline;"><i class="fa fa-clock-o" aria-hidden="true"></i></div><div class="sec">20 sec</div></a>