Description: Different styled buttons with LivIcons.
Requires: Bootstrap 3.X for basic grid, buttons, text, etc. styles.
WordPress Note: This example may require theme files customization or using a page builder (composer) at your own. See on it as a starting point.
Important: LivIcons data-options
are set to different from these defaults only! If you have another set of the default options please use a full notation of them which you can get from the Configuration tool
<!-- Buttons --> <div class="container"> <h3>Square buttons</h3> <div class="row"> <div class="col-sm-4 col-xs-12"> <div class="livicon-evo-button blue"> <div class="livicon-evo" data-options=" name: globe.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>default</span> </div> <br> <div class="livicon-evo-button blue divided"> <div class="livicon-evo" data-options=" name: image.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>divided</span> </div> <br> <div class="livicon-evo-button blue divided full-width"> <div class="livicon-evo" data-options=" name: envelope-put.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>full width</span> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="livicon-evo-button green"> <div class="livicon-evo" data-options=" name: like.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>default</span> </div> <br> <div class="livicon-evo-button green divided"> <div class="livicon-evo" data-options=" name: gear.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>divided</span> </div> <br> <div class="livicon-evo-button green divided full-width"> <div class="livicon-evo" data-options=" name: hand-right.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>full width</span> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="livicon-evo-button grey"> <div class="livicon-evo" data-options=" name: help.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>default</span> </div> <br> <div class="livicon-evo-button grey divided"> <div class="livicon-evo" data-options=" name: home.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>divided</span> </div> <br> <div class="livicon-evo-button grey divided full-width"> <div class="livicon-evo" data-options=" name: leaf.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>full width</span> </div> </div> </div> <br> <h3>Rounded buttons</h3> <div class="row"> <div class="col-sm-4 col-xs-12"> <div class="livicon-evo-button rounded cyan"> <div class="livicon-evo" data-options=" name: coins.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>default</span> </div> <br> <div class="livicon-evo-button rounded cyan divided"> <div class="livicon-evo" data-options=" name: gears.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>divided</span> </div> <br> <div class="livicon-evo-button rounded cyan divided full-width"> <div class="livicon-evo" data-options=" name: link.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>full width</span> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="livicon-evo-button rounded teal"> <div class="livicon-evo" data-options=" name: loader-2.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>default</span> </div> <br> <div class="livicon-evo-button rounded teal divided"> <div class="livicon-evo" data-options=" name: map.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>divided</span> </div> <br> <div class="livicon-evo-button rounded teal divided full-width"> <div class="livicon-evo" data-options=" name: piggybank.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>full width</span> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="livicon-evo-button rounded purple"> <div class="livicon-evo" data-options=" name: print-doc.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>default</span> </div> <br> <div class="livicon-evo-button rounded purple divided"> <div class="livicon-evo" data-options=" name: pulse.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>divided</span> </div> <br> <div class="livicon-evo-button rounded purple divided full-width"> <div class="livicon-evo" data-options=" name: search.svg; size: 30px; style: lines; strokeColor: #fff; eventOn: parent"> </div> <span>full width</span> </div> </div> </div> </div>
/************* Buttons **************/ .livicon-evo-button { display: inline-block; position: relative; margin: 0 0 15px 0; padding: 12px 20px 12px 15px; border: none; font-size: 18px; font-weight: 300; text-align: left; color: rgba(255,255,255,0.9); text-transform: uppercase; background: #777; cursor: pointer; border-radius: 0px; transition: all 0.2s; } .livicon-evo-button:focus { outline: none; } .livicon-evo-button .livicon-evo { float: left; opacity: 0.9; } .livicon-evo-button span { line-height: 1.6; margin-left: 15px; } .livicon-evo-button.full-width{ width: 100%; } .livicon-evo-button.divided span { margin-left: 30px; } .livicon-evo-button.rounded { border-radius: 6px; } .livicon-evo-button.divided::before { display: inline-block; width: 60px; height: 100%; position: absolute; top: 0; left: 0; border: none; content: ""; background-color: rgba(0,0,0,0.2); } .livicon-evo-button.divided.rounded::before { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .livicon-evo-button.blue { background:#039BE5; } .livicon-evo-button.blue:active, .livicon-evo-button.blue:focus { background: #4FC3F7; } .livicon-evo-button.cyan { background:#0097A7; } .livicon-evo-button.cyan:active, .livicon-evo-button.cyan:focus { background: #00BCD4; } .livicon-evo-button.teal { background:#009688; } .livicon-evo-button.teal:active, .livicon-evo-button.teal:focus { background: #4DB6AC; } .livicon-evo-button.green { background:#689F38; } .livicon-evo-button.green:active, .livicon-evo-button.green:focus { background: #8BC34A; } .livicon-evo-button.orange { background:#FB8C00; } .livicon-evo-button.orange:active, .livicon-evo-button.orange:focus { background: #FFA726; } .livicon-evo-button.grey { background:#607D8B; } .livicon-evo-button.grey:active, .livicon-evo-button.grey:focus { background: #90A4AE; } .livicon-evo-button.red { background:#FF7043; } .livicon-evo-button.red:active, .livicon-evo-button.red:focus { background: #FF8A65; } .livicon-evo-button.purple { background:#9C27B0; } .livicon-evo-button.purple:active, .livicon-evo-button.purple:focus { background: #BA68C8; }