Love Button

index.html

<button class="topcoat-icon-button">
  <span class="icomatic">like</span>
  Button
</button>

love-button.markdown

Love Button

A Pen by Stan Williams on CodePen.

License.

style.css

body {
    background-color: #111;
}
.topcoat-icon-button,
.topcoat-icon-button--quiet,
.topcoat-icon-button--large,
.topcoat-icon-button--large--quiet {
  box-sizing: border-box;
  padding-bottom: 0.25rem;
  color: #cc3333;
  text-shadow: 0 -1px rgba(0,0,0,0.69);
  background-color: #595b5b;
  box-shadow: inset 0 1px #737373;
  border: 1px solid #777;
  border-radius: 4px;
}

.topcoat-icon-button:hover,
.topcoat-icon-button--quiet:hover,
.topcoat-icon-button--large:hover,
.topcoat-icon-button--large--quiet:hover {
  background-color: #626465;
}

.topcoat-icon-button:focus,
.topcoat-icon-button--quiet:focus,
.topcoat-icon-button--quiet:hover:focus,
.topcoat-icon-button--large:focus,
.topcoat-icon-button--large--quiet:focus,
.topcoat-icon-button--large--quiet:hover:focus {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
  outline: 0;
}

.topcoat-icon-button:active,
.topcoat-icon-button--large:active {
  border: 1px solid #333434;
  background-color: #3f4041;
  box-shadow: inset 0 1px rgba(0,0,0,0.05);
}

styles

<link href="http://cdnjs.cloudflare.com/ajax/libs/topcoat-icons/0.2.0/font/icomatic.css" rel="stylesheet" />