michael-d
9/11/2017 - 1:21 AM

Buttons Style 3

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);
}