JSFiddle - React, Tailwind, and code Playground

by smorris1900

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<button class="btn"> Save</button>

<button class="btn2"> Save</button>

<a href="#">Save</a>

CSS

.btn {
  border: none;
  color: grey;
  font-size: 16px;
  cursor: pointer;
  padding: 12px 16px;
}

.btn:before {
  content: "";
  display: block;
  background: url("http://alexfeds.com/wp-content/uploads/2018/04/save_icon.svg") no-repeat;
  width: 16px;
  height: 16px;
  float: left;
  margin: 0 6px 0 0;
}

.btn2 {
  border: none;
  color: grey;
  padding: 12px 16px 12px 50px;
  font-size: 16px;
  cursor: pointer;
  background-image: url("http://alexfeds.com/wp-content/uploads/2018/04/save_icon.svg");
  background-repeat: repeat-y;
}

a {
  text-decoration: none;
  color: #515151;
  display: inline-block;
  background-color: #dfdfdf;
  padding: 12px 16px;
}

a:before {
  font-family: FontAwesome;
  content: "\f15b";
  display: inline-block;
  padding-right: 10px;
  vertical-align: middle;
  font-size: 20px;
}