Cacher is the code snippet organizer for pro developers

<div id="buttons">


<div class="butFrame" onclick="window.location='#'">
    <div class="butImage"><img src="_gb1.jpg" alt="" /></div>
        <div class="butText">
            <h3>Title</h3>
            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="butImage"><img src="_gb2.jpg" alt="" /></div>
        <div class="butText">
            <h3>Title</h3>
            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="butImage"><img src="_gb3.jpg" alt="" /></div>
        <div class="butText">
            <h3>Title</h3>
            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="butImage"><img src="_gb4.jpg" alt="" /></div>
        <div class="butText">
            <h3>Title</h3>
            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 {
Background:#f1f1f1;
    width:24%; /* Change This Dependong On How Many Buttons You Have*/
    position:relative;
    cursor:pointer;
    padding:10px 10px 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;
}

.butImage {
    width:100%;
    display:block;
}

.butImage img {
    width:100%;
    height:auto;
    display:block;
}

.butText{
    display:block;
    width:100%;
    font-size:.95em;
    line-height:1.4em;
    padding:10px 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;

    
}

.butText h3 {
  font-size: 1.4em;
  color: #333;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight:700;
}

.butFrame a{
   position:absolute;
   bottom:0px;
   right:0px;
   width:100%;
   display:block;
   padding:10px;
   line-height:1em;
   cursor:pointer;
background:rgba(0,0,0,.8);
   color:#fff;
  font-weight:700;
   font-size:.8em;
   line-height:1em;
   text-transform:uppercase;
   text-align:center;
   text-decoration:none;
    -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);
}