Font Awesome 5.4.2 Buttons

by Charles Butler

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css">
<span class="account">527048194</span> <span class="account">527048194</span> <span class="account">527048194</span> <span class="account">527048194</span>

CSS

@import url('https://fonts.googleapis.com/css?family=Oswald:400,500,600');
body {
    padding:30px;
    background: #FAFAFA;
    font-family: "Oswald", "Helvetica Neue", Arial, Helvetica, sans-serif
}
span.account {
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #DDD;
    color: #333;
    padding: 3px 6px 3px 6px !important;
    line-height: 20px;
    margin: 3px 4px 4px 3px !important;
    font-size: 14px;
    border-radius: 3px;
    letter-spacing: 1px;
    transition: all 150ms ease-in-out;

}
span.account:hover {
    border: 1px solid rgba(0, 0, 0, 0);
    color: #fff;
    background-color: rgba(0, 154, 126, 1);
    color: #fff;
    cursor: default;
	animation-name: pulsate;
	animation-duration: 0.8s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
}

span.account:before{
   font-family: FontAwesome;
   display: inline-block;
   padding-right: 6px;
   vertical-align: middle;
}

span.account:before {
   content: "\f2bd";
}
@keyframes pulsate {
    0%   {box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1);}
    40%  {box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);}
    100% {box-shadow: 0 0 0 0px rgba(0, 0, 0, 0);}
}