qcButton

by ksevksev

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="insp360-qcTaskIconContainer">
    <div class="insp360-qcTaskIconReWorkPending">
        <span class="glyphicon glyphicon-remove insp360-qcTaskGlyphPadding"></span>
    </div>
    <div class="insp360-qcTaskIconCompletedPending">
        <span class="glyphicon glyphicon-ok insp360-qcTaskGlyphPadding"></span>
    </div>
</div>
<div style="background-color:tan; clear:both;">&nbsp;</div>
<div class="insp360-qcTaskIconContainer">
    <div class="insp360-qcTaskIconReWorkPending insp360-qcTaskIconReWorkGray">
        <span class="glyphicon glyphicon-remove insp360-qcTaskGlyphPadding"></span>
    </div>
    <div class="insp360-qcTaskIconCompletedPending insp360-qcTaskCompletedDone">
        <span class="glyphicon glyphicon-ok insp360-qcTaskGlyphPadding"></span>
    </div>
</div>
<div style="background-color:tan; clear:both;">&nbsp;</div>
<div class="insp360-qcTaskIconContainer">
    <div class="insp360-qcTaskIconReWorkPending insp360-qcTaskReWorkDone">
        <span class="glyphicon glyphicon-remove insp360-qcTaskGlyphPadding"></span>
    </div>
    <div class="insp360-qcTaskIconCompletedPending insp360-qcTaskIconCompletedGray">
        <span class="glyphicon glyphicon-ok insp360-qcTaskGlyphPadding"></span>
    </div>
</div>

CSS

.insp360-qcTaskIconContainer
{
    float: right;
    width: 69px;
    height: 34px;
    border: dashed cyan 5px;
    text-align: center;
}

.insp360-qcTaskIconReWorkPending,
.insp360-qcTaskIconCompletedPending
{
    border: solid 1px #e0953d;
    width: 29px;
    height: 24px;
}
.insp360-qcTaskIconCompletedPending
{
    float: right;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: none;
}

.insp360-qcTaskIconReWorkPending
{
    float: left;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    width: 30px;    
}

.insp360-qcTaskGlyphPadding
{
    padding-top: 3px;
}

.insp360-qcTaskIconCompletedGray
{
    border-top: solid 1px #939898;
    border-right: solid 1px #939898;
    border-bottom: solid 1px #939898;
}

.insp360-qcTaskCompletedDone
{
    background-color: #53b778;
    color: white;
    border: #53b778 1px solid;
}

.insp360-qcTaskIconReWorkGray
{
    border-top: solid 1px #939898;
    border-left: solid 1px #939898;
    border-bottom: solid 1px #939898;
    border-right: solid 1px white;
}

.insp360-qcTaskReWorkDone
{
    background-color: #c8575a;
    color: white;
    border-left: #c8575a 1px solid;
    border-top: #c8575a 1px solid;
    border-bottom: #c8575a 1px solid;
    border-right: white 1px solid;
}