Cacher is the code snippet organizer for pro developers

<div id="buttons">


<div class="butFrame" onclick="window.location='#'">
<div class="icon">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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);
}