<h2>Flat style vote button for my WordPress plugin, vote5.</h2>

<h3>Normal Buttons</h3>
<p>
  <a class="vote5" style="background-color: #1abc9c;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #2ecc71;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #3498db;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #9b59b6;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #34495e;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #16a085;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #27ae60;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #2980b9;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #8e44ad;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #2c3e50;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #f1c40f;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #e67e22;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #e74c3c;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #ecf0f1;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #95a5a6;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #f39c12;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #d35400;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #c0392b;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #bdc3c7;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #7f8c8d;">Vote<span title="Vote">0</span></a>
</p>

<h3>Wide Buttons</h3>
<p class="wide">
  <a class="vote5" style="background-color: #1abc9c;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #2ecc71;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #3498db;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #9b59b6;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #34495e;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #16a085;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #27ae60;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #2980b9;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #8e44ad;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #2c3e50;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #f1c40f;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #e67e22;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #e74c3c;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #ecf0f1;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #95a5a6;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #f39c12;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #d35400;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #c0392b;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #bdc3c7;">Vote<span title="Vote">0</span></a>

  <a class="vote5" style="background-color: #7f8c8d;">Vote<span title="Vote">0</span></a>
</p>

<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CESDK2J7&placement=getbutterflycom" id="_carbonads_js"></script>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);

body {
  background-color: #333333;
  color: #ffffff;
  font-family: "Open Sans";
  font-weight: 300;
}

.vote5, vote5 span {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.vote5 {
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 0 6px 8px;
  margin: 0 1px 1px 0;
  background-color: #dd3333;
  color: #ffffff;
  text-decoration: none;
  line-height: 1;

  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;

  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
.vote5:hover {
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0);
}
.vote5 span {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  text-decoration: none;
  font-weight: normal;
  padding: 0 6px;
  margin: 0 0 0 6px;
}

.wide .vote5 {
  font-size: 14px;
  font-weight: 300;
  padding: 12px 0 12px 16px;
}
.wide .vote5 span {
  padding: 0 8px;
  margin: 0 0 0 8px;
}

External CSS

  1. https://getbutterfly.com/static/codepen-carbon.css

External JavaScript

This Pen doesn't use any external JavaScript resources.