Buttons Style 5
<div id="buttons">
<div class="butFrame" onclick="window.location='#'">
<div class="icon"> </div>
<div class="butText">
<div class="butTitle">Title</div>
Praesent faucibus posuere ex vel feugiat. Vivamus feugiat feugiat nunc. Proin sed nisi et nisl dapibus aliquet.
</div>
</div>
<div class="butFrame" onclick="window.location='#'">
<div class="icon"> </div>
<div class="butText">
<div class="butTitle">Title</div>
Praesent faucibus posuere ex vel feugiat. Vivamus feugiat feugiat nunc. Proin sed nisi et nisl dapibus aliquet.
</div>
</div>
<div class="butFrame" onclick="window.location='#'">
<div class="icon"> </div>
<div class="butText">
<div class="butTitle">Title</div>
Praesent faucibus posuere ex vel feugiat. Vivamus feugiat feugiat nunc. Proin sed nisi et nisl dapibus aliquet.
</div>
</div>
<div class="butFrame" onclick="window.location='#'">
<div class="icon"> </div>
<div class="butText">
<div class="butTitle">Title</div>
Praesent faucibus posuere ex vel feugiat. Vivamus feugiat feugiat nunc. Proin sed nisi et nisl dapibus aliquet.
</div>
</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;
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;
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-justify-content: space-between;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.butTitle{
font-size:1.5em;
line-height:1em;
position:relative;
color:#333;
padding:0px 0px 10px 0px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.butText{
width:75%;
padding:10px;
font-size:.9em;
line-height:1.3em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
/* ----------------
ICON STYLES
------------------ */
.icon{
width:25%;
background:rgba(0,0,0,.8);
color:#fff;
position:relative;
border-radius:2px;
}
.butFrame .icon:before {
display:inline-block;
position:absolute;
float:left;
padding:0px;
width:100%;
height:100%;
font-family:FontAwesome;
color:#fff;
margin-right:0px;
font-size:1.6em;
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-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* CONTENT CODES FROM FONT-AWESOME.CSS */
.butFrame:nth-child(1) .icon:before {
content: "\f013"
}
.butFrame:nth-child(2) .icon:before {
content: "\f0c0"
}
.butFrame:nth-child(3) .icon:before {
content: "\f164"
}
.butFrame:nth-child(4) .icon:before {
content: "\f0e0"
}
/* ----------------
HOVER STYLES
------------------ */
.butFrame *{
-moz-transition:.5s;
-webkit-transition:.5s;
-ms-transition:.5s;
-o-transition:.5s;
transition:.5s;
}
.butFrame:hover .icon{
background:rgba(0,0,0,.5);
}
.butFrame:active .icon{
background:rgba(0,0,0,1);
}