Buttons Style 3
<div id="buttons">
<div class="butFrame" onclick="window.location='#'">
Title
<a href="#">Read More</a>
</div>
<div class="butFrame" onclick="window.location='#'">
Title
<a href="#">Read More</a>
</div>
<div class="butFrame" onclick="window.location='#'">
Title
<a href="#">Read More</a>
</div>
<div class="butFrame" onclick="window.location='#'">
Title
<a href="#">Read More</a>
</div>
</div>
#buttons{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-flow:row wrap;
-ms-flex-flow:row wrap;
flex-flow:row wrap;
}
.butFrame {
width:24%; /* Change This Dependong On How Many Buttons You Have*/
position:relative;
cursor:pointer;
text-align:center;
font-size:1.6em;
line-height:1em;
background:#f1f1f1;
padding:10px;
border-radius:5px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.butFrame a{
display:block;
font-size:.5em;
text-align:center;
text-decoration:none;
padding:7px;
line-height:1em;
cursor:pointer;
background:rgba(0,0,0,.8);
color:#fff;
margin-top:8px;
border-radius:2px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
/* ----------------
HOVER STYLES
------------------ */
.butFrame *{
-moz-transition:.5s;
-webkit-transition:.5s;
-ms-transition:.5s;
-o-transition:.5s;
transition:.5s;
}
.butFrame:hover{
}
.butFrame:hover a{
background:rgba(0,0,0,.5);
color:#fff;
}
.butFrame:active a{
background:rgba(0,0,0,1);
}