JSFiddle - React, Tailwind, and code Playground

HTML

ipsum lorem packem <br/>

It is your destiny Tatooine carbonite Ewok <span class="button"><a href="//theforce.com">the Force</a></span> is strong with this one jawa. Battle of Yavin garbage compactor X-Wing Luke Skywalker wretched hive of scum and villainy. Emperor these aren't the droids you're looking for <span class="link_button"><a href="//starwars.wikia.com/wiki/Endor">Endor<a/></span> star destroyer Palpatine. Stormtrooper great pit of Carkoon the Force.

CSS

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

.button a:link, .button a:visited{
  /* remove the offening underline */
  text-decoration: none;
  color: #333333;
}

.link_button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    background: #4479BA;
    padding: 2px 10px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    color: #FFFFFF;
}
.link_button a:link, .link_button a:visited {
  /* remove the offening underline */
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    color: #FFFFFF;
}

JavaScript

// none - needed