cMAX Button Styles

Button Styles for cMAX Buttons

by Troy Alford

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<div class="wb-button-bar">
    <div class="topic-name complete">3 Section 3</div>
    <div class="buttons">
        <span class="button green right"><i class="icon-arrow-left"></i>Previous</span>
        <span class="button green"><i class="icon-arrow-right"></i>Next</span>
        <span class="button separator"></span>
        <span class="button green"><i class="icon-arrow-right"></i>Guide Me</span>
    </div>
</div>

CSS

body { background: #eee; padding: 0; margin: 0; }
.wb-button-bar {
    position: relative; 
    font-size: 0; 
    font-family: Verdana; 
    display: block; 
    width: 100%; height: 25px; 
    border-bottom: 1px solid #336699;
    background: #fff;
}

.wb-button-bar > .topic-name, .wb-button-bar > .buttons { position: absolute; }
.wb-button-bar > .topic-name, .wb-button-bar .button { font-size: 10px; }

.topic-name { position: relative; font-weight: bold; display: inline-block; margin: 6px; padding-left: 15px; }
.topic-name:before { 
    display: inline-block; 
    position: absolute; 
    left: 0; top: 1px;
    background: #fff;
    border: 2px solid #000; 
    content: ''; 
    width: 6px; height: 6px;
}
.topic-name.complete:before { background: #00C000; }

.wb-button-bar > .buttons { position: absolute; right: 0; top: 6px; }
.button {
    cursor: pointer;
    font-weight: bold;
    border-radius: 3px;
    margin: 0 3px;
    padding: 3px 5px 3px 25px;
    position: relative;
}
.button > i[class^=icon-] {
    position: absolute;
    left: 5px;
    padding: 0 5px 0 0;
    border: 1px dotted #fff;
    border-width: 0 1px 0 0;
}

.button.right { 
    padding: 3px 25px 3px 5px; 
}
.button.right > i[class^=icon-] { 
    left: auto; 
    right: 5px;
    padding: 0 0 0 5px; 
    border-width: 0 0 0 1px; 
}

.button.separator { display: inline-block; width: 0px; padding: 0; margin: 0 5px; }
.button.green { background: #008000; color: #fff; }

.button:hover {
    filter:progid:DXImageTransform.Microsoft.Glow(Color=#369,Strength=5);
    -webkit-transition: box-shadow 250ms linear 0s;
    -moz-transition: box-shadow 250ms linear 0s;
    -o-transition: box-shadow 250ms linear 0s;
    transition: box-shadow 250ms linear 0s;
    box-shadow: 0px 0px 5px #369;
}