https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css

by Roberts

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<button class="buttonStyle default">
John Doe <i class="buttonIcon fa fa-user" aria-hidden="true"></i>
</button>
<button class="buttonStyle red">
Delete <i class="buttonIcon fa fa-trash" aria-hidden="true"></i>
</button>
<button class="buttonStyle green">
Add post <i class="buttonIcon fa fa-plus" aria-hidden="true"></i>
</button>
<button class="buttonStyle blue">
More information <i class="buttonIcon fa fa-info-circle" aria-hidden="true"></i>
</button>
<button class="buttonStyle violet">
Like <i class="buttonIcon fa fa-heart" aria-hidden="true"></i>
</button>

CSS

.buttonStyle {
  height: 40px;
  outline:none;
  border-radius: 40px;
  padding-left: 15px;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
}

/* Colors */
.buttonStyle.default {
  background-color: #9E9E9E;
  border: 1px solid #8c8c8c;
}
.buttonStyle.default:hover { background-color: #8c8c8c; }
.buttonStyle.red {
  background-color: #f44336;
  border: 1px solid #de392d;
}
.buttonStyle.red:hover { background-color: #de392d; }
.buttonStyle.green {
  background-color: #4CAF50;
  border: 1px solid #3e9842;
}
.buttonStyle.green:hover { background-color: #3e9842; }
.buttonStyle.blue {
  background-color: #03A9F4;
  border: 1px solid #0d92ce;
}
.buttonStyle.blue:hover { background-color: #0d92ce}
.buttonStyle.violet {
  background-color: #9c27b0;
  border: 1px solid #852096;
}
.buttonStyle.violet:hover { background-color: #852096}
/* Colors ---- */

.buttonIcon {
  background-color: rgba(0,0,0,0.15);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 30px;
  margin-left: 5px;
}