No Float Button Box

Prepared for Outlook email template.

by Paul Schmitt

HTML

<script src="https://fonts.googleapis.com/css?family=Asul:400,700"></script>
<!-- Start Button Box -->
<div class="button-box">
    <div class="button"><a href="#">Read more</a>

    </div>
    <div class="button"><a href="#">Contact Us</a>

    </div>
    <!-- End Button Box -->
</div>

CSS

.button-box{
    clear:both;
    float:none;
    text-align:right;
    vertical-align:middle;
    margin:1% 0 2% 0; /* T R B L */
    padding:2% 0 2% 0; /* T R B L */
    background-color:red;
    width:100%;
}
.button-box div{
    display:inline-block;
}
.button {
    position:relative;
    display:block;
    text-align:center;
    vertical-align:top;
    width:128px;
    height:27px;
    border:1px solid #FFF;
    background-color:#33a6d7;
    margin:0 1% 0 0;
    padding:.7% .3% .5% .3%;
    -webkit-box-shadow:2px 4px 2px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:2px 4px 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow:2px 4px 2px 1px rgba(0, 0, 0, 0.2);
}
.button a {
    font-size:18px;
    font-family:'Asul', Arial, sans-serif;
    text-transform:uppercase;
    color:#FFF;
    vertical-align:top;
    text-align:center;
    text-decoration:none;
    padding:1% 0 0 0;
    /* WYZIWIG Mail has an issue here  */
}
.button a:hover {
    text-decoration:underline;
}
.button a:visited {
    color:#FFF;
}