<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 {
box-sizing: border-box;
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;
transition: all 200ms ease;
transition: all 200ms ease;
transition: all 200ms ease;
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;
}
This Pen doesn't use any external JavaScript resources.