<h3 class="shortcodeh">
Buttons</h3>
<a class="button" href="#">Button</a>
<a class="button red" href="#">red Button</a>
<a class="button orange" href="#">orange Button</a>
<a class="button green" href="#">green Button</a>
<a class="button blue" href="h#">blue Button</a>
<a class="button purple" href="#">purple Button</a>
<a class="button yellow" href="#">yellow Button</a>
<a class="button mint" href="#">mint Button</a>
<a class="button aqua" href="#">aqua Button</a>
<a class="button pink" href="#">pink Button</a>
<a class="button white" href="#">white Button</a>
<a class="button grey" href="#">grey Button</a>
<a class="button dark-grey" href="#">dark-grey Button</a>
<br />
<a class="button transparent" href="#">Button</a>
<a class="button transparent red" href="#">red Button</a>
<a class="button transparent orange" href="#">orange Button</a>
<a class="button transparent green" href="#">green Button</a>
<a class="button transparent blue" href="#">blue Button</a>
<a class="button transparent purple" href="#">purple Button</a>
<a class="button transparent yellow" href="#">yellow Button</a>
<a class="button transparent mint" href="#">mint Button</a>
<a class="button transparent aqua" href="#">aqua Button</a>
<a class="button transparent pink" href="#">pink Button</a>
<a class="button transparent grey" href="#">grey Button</a>
<a class="button transparent dark-grey" href="#">dark-grey Button</a>
<br />
<a class="button" href="#"><i class="fa fa-bolt"></i>Button</a>
<a class="button red" href="#"><i class="fa fa-bookmark"></i>red Button</a>
<a class="button orange" href="#"><i class="fa fa-cart-arrow-down"></i>orange Button</a>
<a class="button green" href="#"><i class="fa fa-bars"></i>green Button</a>
<a class="button blue" href="#"><i class="fa fa-cloud-download"></i>blue Button</a>
<a class="button purple" href="#"><i class="fa fa-fighter-jet"></i>purple Button</a>
<a class="button yellow" href="#"><i class="fa fa-external-link"></i>yellow Button</a>
<a class="button mint" href="#"><i class="fa fa-gavel"></i>mint Button</a>
<a class="button aqua" href="#"><i class="fa fa-life-ring"></i>aqua Button</a>
<a class="button pink" href="#"><i class="fa fa-magic"></i>pink Button</a>
<a class="button white" href="#"><i class="fa fa-location-arrow"></i>white Button</a>
<a class="button grey" href="#"><i class="fa fa-leaf"></i>grey Button</a>
<a class="button dark-grey" href="#"><i class="fa fa-meh-o"></i>dark-grey Button</a>
<br />
.button,input.button{position:relative;display:inline-block;margin-right:1em;margin-bottom:1.34em;padding:0.667em 2em;border-bottom:none;-webkit-border-radius:0.333em;-moz-border-radius:0.333em;border-radius:0.333em;background-color:rgba(84,87,102,1);color:#FFFFFF!important;text-decoration:none!important;text-transform:uppercase;font-size:0.778em!important;line-height:1.714em!important;cursor:pointer}
.button,input.button{-webkit-transition:background-color 0.3s linear,color 0.3s linear;-moz-transition:background-color 0.3s linear,color 0.3s linear;transition:background-color 0.3s linear,color 0.3s linear}.button:hover,input.button:hover{border-bottom:none;background-color:rgba(84,87,102,0.9)}.button:active,input.button:active{box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1)}.button i{margin-right:0.667em;vertical-align:middle;line-height:1em!important}.button.red,input.button.red{background-color:rgba(253,104,91,1)}.button.red:hover,input.button.red:hover{background-color:rgba(253,104,91,0.9)}.button.orange,input.button.orange{background-color:rgba(250,111,87,1)}.button.orange:hover,input.button.orange:hover{background-color:rgba(250,111,87,0.9)}.button.yellow,input.button.yellow{background-color:rgba(254,205,94,1)}.button.yellow:hover,input.button.yellow:hover{background-color:rgba(254,205,94,0.9)}.button.green,input.button.green{background-color:rgba(161,210,110,1)}.button.green:hover,input.button.green:hover{background-color:rgba(161,210,110,0.9)}.button.mint,input.button.mint{background-color:rgba(79,206,173,1)}.button.mint:hover,input.button.mint:hover{background-color:rgba(79,206,173,0.9)}.button.aqua,input.button.aqua{background-color:rgba(85,193,231,1)}.button.aqua:hover,input.button.aqua:hover{background-color:rgba(85,193,231,0.9)}.button.blue,input.button.blue{background-color:rgba(96,158,234,1)}.button.blue:hover,input.button.blue:hover{background-color:rgba(96,158,234,0.9)}.button.purple,input.button.purple{background-color:rgba(171,148,233,1)}.button.purple:hover,input.button.purple:hover{background-color:rgba(171,148,233,0.9)}.button.pink,input.button.pink{background-color:rgba(234,137,191,1)}.button.pink:hover,input.button.pink:hover{background-color:rgba(234,137,191,0.9)}.button.white,input.button.white{background-color:rgba(255,255,255,1);color:#545766!important}.button.white:hover,input.button.white:hover{background-color:rgba(255,255,255,0.9)}.button.grey,input.button.grey{background-color:rgba(170,178,188,1)}.button.grey:hover,input.button.grey:hover{background-color:rgba(170,178,188,0.9)}.button.dark-grey,input.button.dark-grey{background-color:rgba(84,87,102,1)}.button.dark-grey:hover,input.button.dark-grey:hover{background-color:rgba(84,87,102,0.9)}.button.transparent,input.button.transparent{border:2px solid rgba(84,87,102,1);background-color:transparent;color:rgba(84,87,102,1)!important}.button.transparent:hover,input.button.transparent:hover{border:2px solid rgba(84,87,102,1);background-color:rgba(84,87,102,1);color:#fff!important}.button.transparent.red,input.transparent.button.red{border:2px solid rgba(253,104,91,1);color:rgba(253,104,91,1)!important}.button.transparent.red:hover,input.button.transparent.red:hover{border:2px solid rgba(253,104,91,1);background-color:rgba(253,104,91,1);color:#fff!important}.button.transparent.orange,input.transparent.button.orange{border:2px solid rgba(250,111,87,1);color:rgba(250,111,87,1)!important}.button.transparent.orange:hover,input.button.transparent.orange:hover{border:2px solid rgba(250,111,87,1);background-color:rgba(250,111,87,1);color:#fff!important}.button.transparent.yellow,input.transparent.button.yellow{border:2px solid rgba(254,205,94,1);color:rgba(254,205,94,1)!important}.button.transparent.yellow:hover,input.button.transparent.yellow:hover{border:2px solid rgba(254,205,94,1);background-color:rgba(254,205,94,1);color:#fff!important}.button.transparent.green,input.transparent.button.green{border:2px solid rgba(161,210,110,1);color:rgba(161,210,110,1)!important}.button.transparent.green:hover,input.button.transparent.green:hover{border:2px solid rgba(161,210,110,1);background-color:rgba(161,210,110,1);color:#fff!important}.button.transparent.mint,input.transparent.button.mint{border:2px solid rgba(79,206,173,1);color:rgba(79,206,173,1)!important}.button.transparent.mint:hover,input.button.transparent.mint:hover{border:2px solid rgba(79,206,173,1);background-color:rgba(79,206,173,1);color:#fff!important}.button.transparent.aqua,input.transparent.button.aqua{border:2px solid rgba(85,193,231,1);color:rgba(85,193,231,1)!important}.button.transparent.aqua:hover,input.button.transparent.aqua:hover{border:2px solid rgba(85,193,231,1);background-color:rgba(85,193,231,1);color:#fff!important}.button.transparent.blue,input.transparent.button.blue{border:2px solid rgba(96,158,234,1);color:rgba(96,158,234,1)!important}.button.transparent.blue:hover,input.button.transparent.blue:hover{border:2px solid rgba(96,158,234,1);background-color:rgba(96,158,234,1);color:#fff!important}.button.transparent.purple,input.transparent.button.purple{border:2px solid rgba(171,148,233,1);color:rgba(171,148,233,1)!important}.button.transparent.purple:hover,input.button.transparent.purple:hover{border:2px solid rgba(171,148,233,1);background-color:rgba(171,148,233,1);color:#fff!important}.button.transparent.pink,input.transparent.button.pink{border:2px solid rgba(234,137,191,1);color:rgba(234,137,191,1)!important}.button.transparent.pink:hover,input.button.transparent.pink:hover{border:2px solid rgba(234,137,191,1);background-color:rgba(234,137,191,1);color:#fff!important}.button.transparent.white,input.transparent.button.white{border:2px solid rgba(255,255,255,1);color:rgba(255,255,255,1)!important}.button.transparent.white:hover,input.button.transparent.white:hover{border:2px solid rgba(255,255,255,1);background-color:rgba(255,255,255,1);color:#545766!important}.button.transparent.grey,input.transparent.button.grey{border:2px solid rgba(170,178,188,1);color:rgba(170,178,188,1)!important}.button.transparent.grey:hover,input.button.transparent.grey:hover{border:2px solid rgba(170,178,188,1);background-color:rgba(170,178,188,1);color:#fff!important}.button.transparent.dark-grey,input.transparent.button.dark-grey{border:2px solid rgba(84,87,102,1);color:rgba(84,87,102,1)!important}.button.transparent.dark-grey:hover,input.button.transparent.dark-grey:hover{border:2px solid rgba(84,87,102,1);background-color:rgba(84,87,102,1);color:#fff!important}.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Karla,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}.demo {background-color:#3498DB;}.download {background-color:#825AA0;}.demo:hover,.download:hover {background-color:#36424a;color:#fff;opacity:1;}.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}kbd{border:1px solid gray;line-height: 1.9em;font-size:1.2em;box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:2px 3px;padding:1px 5px;}.alert-del-btn{position:absolute;top:12px;right:15px;font-size:19px;font-weight:700;font-family:initial;cursor:pointer}.alert-del-btn:before{font-family:font-awesome; content:"\f00d";font-family:FontAwesome;font-weight:400;font-size:15px;color:rgba(0,0,0,0.3)}.alert-del-btn:hover:before{color:rgba(0,0,0,0.4)}.alert-content{margin-left:95px}.alert-message{position:relative;display:block;background-color:#FAFAFA;padding:12px 20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#2f3239;border:1px solid}.alert-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#2f3239}.alert-message span{font-size:14px!important}.alert-message i{font-size:18px;line-height:20px;margin-right:5px}.alert-message.success{background-color:#c1faa8;border-color:#9cff70;color:#6db74c}.alert-message.success a,.alert-message.success span{color:#1d9d74}.alert-message.error{background-color:#ffcdc7;border-color:#fdb1a8;color:#ff391f}.alert-message.error a,.alert-message.error span{color:#378FFF}.alert-message.warning{background-color:#fff4bb;border-color:#fc6;color:#e99b00}.alert-message.warning a,.alert-message.warning span{color:#8a6d3b}.alert-message.alert{background-color:#bceeff;border-color:#8ae1ff;color:#21c2f8}.alert-message.alert a,.alert-message.alert span{color:#F55D5D}
Buttons
Button
red Button
orange Button
green Button
blue Button
purple Button
yellow Button
mint Button
aqua Button
pink Button
white Button
grey Button
dark-grey Button
Button
red Button
orange Button
green Button
blue Button
purple Button
yellow Button
mint Button
aqua Button
pink Button
grey Button
dark-grey Button
Button
red Button
orange Button
green Button
blue Button
purple Button
yellow Button
mint Button
aqua Button
pink Button
white Button
grey Button
dark-grey Button
