playa buttons and alignment

by stot

HTML

<div class="p-button-row p-button-4">
    <a href="#" class="p-button-blue p-button">Evolve</a>
    <a href="#" class="p-button-blue p-button">Sell</a>
    <a href="#" class="p-button-blue p-button">Fuse</a>
    <a href="#" class="p-button-blue p-button">Fuse</a>
</div>
<div class="p-button-row p-button-3">
    <a href="#" class="p-button-blue p-button">Evolve</a>
    <a href="#" class="p-button-blue p-button">Sell</a>
    <a href="#" class="p-button-blue p-button">Fuse</a>
</div>
<div class="p-button-row p-button-2">
    <a href="#" class="p-button-blue p-button">Evolve</a>
    <a href="#" class="p-button-blue p-button">Sell</a>
</div>


<a href="#" class="p-button-blue p-button" style="display:block">Evolve</a>

CSS

@import url(http://fonts.googleapis.com/css?family=Carter+One);

.p-button {
    white-space:nowrap;
    color:white;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    font-size: 22px;
    text-decoration:none;
    font-family: 'Carter One';
    text-shadow: 0 0 4px #000;
}

.p-button-row {
    display: flex;
    justify-content: space-around;
}
.p-button-4 .p-button {
    width:18%;
}
.p-button-3 .p-button {
    width:25%;
}
.p-button-2 .p-button {
    width:40%;
}

.p-button-blue {
border-style: solid;
border-width: 10px 14px;
-moz-border-image: url(http://local.playa.cc/pic/button-blue.png) 10 14 stretch;
-webkit-border-image: url(http://local.playa.cc/pic/button-blue.png) 10 14 stretch;
-o-border-image: url(http://local.playa.cc/pic/button-blue.png) 10 14 stretch;
border-image: url(http://local.playa.cc/pic/button-blue.png) 10 14 fill stretch;
}