Buttons with Font Awesome
Simple Font Awesome Button

An example FontAwesome button, easily adjusted to use as you need.

Example

Read More

Html

<div>
<a class="linkbutton" href="#">Read More</a>
</div>

CSS


a.linkbutton {
  line-height:1em;
  font-size:16px;
  text-decoration:none;
  color: white;
  background:#2a92d0;
  display:inline-block;
  padding:15px 12px 15px 15px;
  transition:background 200ms;
  border-radius:6px;
}

a.linkbutton:hover {
  background:#000;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

a.linkbutton:after {
  font-family: 'Font Awesome 5 Free';
  font-weight:300;
  content: "\f35a";
  margin-left:20px;
  color: white;
  font-size:18px;
  vertical-align:middle;
} 

Leave a Reply

Your email address will not be published. Required fields are marked *