Diamond Buttons

reswell design

by sqiudward

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<div>
    <div class="wrapper wrapper-content animated fadeIn">
        <div class="container m-b-lg">
            <div class="row">
                <div class="col-xs-12 text-center">
                    <h1 style="color: #fff;">tenant</h1>
                    <p class="help-block" style="color: #bbb;">Hello welcome</p>
                </div>
            </div>
            <div class="row" style="margin-top: 75px;">
                <div class="col-sm-4 animated bounceIn" style="margin-bottom: 100px;">
                   
                    <div class="diamond diamond-field">
                        <div>Field</div>
                    </div>
                </div>
                <div class="col-sm-4 animated bounceIn" style="margin-bottom: 100px;">

                    <div class="diamond diamond-reservoir">
                        <div>Reservoir</div>
                    </div>
                </div>
                <div class="col-sm-4 animated bounceIn" style="margin-bottom: 100px;">
                   
                    <div class="diamond diamond-well">
                        <div>Well</div>
                    </div>
                </div>
            </div>
      
        </div>
    </div>
</div>

CSS

.diamond {
    width: 200px;
    height: 200px;
    color: white;
    background-color: #41596f;
    margin: auto;
    box-shadow: -5px 5px 5px 0 rgba(0,0,0,0.5);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transform-origin: center;
    text-align: center;
    cursor: pointer;
    position: relative;
    top: 10px;
    transition: all 0.1s ease-in;
}

    .diamond div {
        color: black;
        width: 186px;
        height: 186px;
        vertical-align: middle;
        line-height: 186px;
        font-size: 36px;
        font-weight: 600;
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        transform-origin: center;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }

.diamond-field {
    background-color: lime;
    border-top: 7px solid greenyellow;
    border-right: 7px solid greenyellow;
    border-left: 7px solid green;
    border-bottom: 7px solid green;
}

    .diamond-field:focus,
    .diamond-field:hover {
        box-shadow: -10px 10px 10px 0 rgba(0,0,0,0.5);
        top: 5px;
    }

    .diamond-field:active {
        box-shadow: -7px 7px 7px 0 rgba(0,0,0,0.5);
        top: 8px;
    }

.diamond-reservoir {
    background-color: red;
    border-top: 7px solid salmon;
    border-right: 7px solid salmon;
    border-left: 7px solid darkred;
    border-bottom: 7px solid darkred;
}

    .diamond-reservoir:focus,
    .diamond-reservoir:hover {
        box-shadow: -10px 10px 10px 0 rgba(0,0,0,0.5);
        top: 5px;
    }

    .diamond-reservoir:active {
        box-shadow: -7px 7px 7px 0 rgba(0,0,0,0.5);
        top: 8px;
    }

.diamond-well {
    background-color: #ffe200;
    border-top: 7px solid...