Cacher is the code snippet organizer for pro developers

<div id="buttons">

<div class="butFrame" onclick="window.location='#'">
    <div class="butTitle">Title</div>
        <div class="butText">
            Praesent faucibus posuere ex vel feugiat. Vivamus feugiat feugiat nunc. Proin sed nisi et nisl dapibus aliquet.
        </div>
    <a href="#">Read More</a>               
</div>

<div class="butFrame" onclick="window.location='#'">
    <div class="butTitle">Title</div>
        <div class="butText">
            Praesent faucibus posuere ex vel feugiat. Vivamus feugiat feugiat nunc. Proin sed nisi et nisl dapibus aliquet.
        </div>
    <a href="#">Read More</a>               
</div>

<div class="butFrame" onclick="window.location='#'">
    <div class="butTitle">Title</div>
        <div class="butText">
            Praesent faucibus posuere ex vel feugiat. Vivamus feugiat feugiat nunc. Proin sed nisi et nisl dapibus aliquet.
        </div>
    <a href="#">Read More</a>               
</div>

<div class="butFrame" onclick="window.location='#'">
    <div class="butTitle">Title</div>
        <div class="butText">
            Praesent faucibus posuere ex vel feugiat. Vivamus feugiat feugiat nunc. Proin sed nisi et nisl dapibus aliquet.
        </div>
    <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;
    line-height:1em;
    background:#f1f1f1;
    padding:0px 0px 35px;

    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}


.butTitle{
   background:rgba(0,0,0,.8);
   font-size:1.4em;
   line-height:1em;
   position:relative;
   color:#fff;

    -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-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
           align-items: center;

   -webkit-justify-content: flex-start;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
           justify-content: flex-start;
}

.butText{
   display:block;
   width:100%;
   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;
}

.butFrame a{
   display:block;
   font-size:.9em;
   text-align:center;
   text-decoration:none;
   padding:7px;
   line-height:1em;
   cursor:pointer;
   background:rgba(0,0,0,.8);
   color:#fff;
   position:absolute;
   bottom:0px;
   width:100%;

    -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
------------------ */

.butTitle:before {
  display:inline-block;
  position:relative;
  float:left;
  padding:10px;
  font-family:FontAwesome;
  margin-right:10px;
  border-right:1px solid rgba(255,255,255,0.2);
  color:#fff;
}


/* CONTENT CODES FROM FONT-AWESOME.CSS */

.butFrame:nth-child(1) .butTitle:before {
    content: "\f013"
}

.butFrame:nth-child(2) .butTitle:before {
    content: "\f0c0"
}


.butFrame:nth-child(3) .butTitle:before {
	content: "\f164"
}


.butFrame:nth-child(4) .butTitle:before {
	content: "\f0e0"
}


/* ----------------
HOVER STYLES
------------------ */

.butFrame *{
    -moz-transition:.5s;
    -webkit-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

.butFrame:hover{

}

.butFrame:hover a, .butFrame:hover .butTitle{
background:rgba(0,0,0,.5);
color:#fff;
}

.butFrame:active a, .butFrame:active .butTitle{
background:rgba(0,0,0,1);
}