Description: Pricing plans example with morph LivIcon. This examples uses additional JavaScript code for animations. Replace javascript:void(0);
with your action handler for the form.
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
<!-- Pricing Plans 01 --> <div class="container-fluid pricing-01"> <div class="row"> <div class="col-xs-12"> <h2 class="text-center">Choose your plan</h2> <h4 class="text-center">Lorem ipsum is a pseudo-Latin text used in web design in place of English.</h4> </div> </div> <div class="row"> <form action="javascript:void(0);"> <div class="col-sm-4 col-xs-12"> <div class="price-box"> <div class="price-elem-wrapper"> <div class="livicon-evo" data-options=" name: morph-radio-1.svg; style: solid; size: 90px; strokeWidth: 0; solidColor: #009B90; solidColorBg: #4c5a69; eventType: none "></div> <h3 class="price-title text-center">Standard</h3> <p class="price-text text-center">Lorem ipsum is a pseudo-Latin text used in place of English.</p> <p class="price-value text-center"> <span class="price-sign">$</span> <span class="price-main">8.</span> <span class="price-subprice">99</span> <span class="price-info">/ Month</span> </p> <p class="price-btn text-center"> <button type="submit" class="btn-submit" name="plan" value="standard">Purchase</button> </p> </div> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="price-box"> <div class="price-elem-wrapper"> <div class="livicon-evo" data-options=" name: morph-radio-1.svg; style: solid; size: 90px; strokeWidth: 0; solidColor: #009B90; solidColorBg: #4c5a69; eventType: none; morphState: end "></div> <h3 class="price-title text-center">Developer</h3> <p class="price-text text-center">Lorem ipsum is a pseudo-Latin text used in place of English.</p> <p class="price-value text-center"> <span class="price-sign">$</span> <span class="price-main">19.</span> <span class="price-subprice">99</span> <span class="price-info">/ Month</span> </p> <p class="price-btn text-center active"> <button type="submit" class="btn-submit" name="plan" value="developer">Purchase</button> </p> </div> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="price-box"> <div class="price-elem-wrapper"> <div class="livicon-evo" data-options=" name: morph-radio-1.svg; style: solid; size: 90px; strokeWidth: 0; solidColor: #009B90; solidColorBg: #4c5a69; eventType: none "></div> <h3 class="price-title text-center">Enterprise</h3> <p class="price-text text-center">Lorem ipsum is a pseudo-Latin text used in place of English.</p> <p class="price-value text-center"> <span class="price-sign">$</span> <span class="price-main">42.</span> <span class="price-subprice">00</span> <span class="price-info">/ Month</span> </p> <p class="price-btn text-center"> <button type="submit" class="btn-submit" name="plan" value="enterprise">Purchase</button> </p> </div> </div> </div> </form> </div> </div>
/********* Pricing Plans 01 *********/ .pricing-01 { padding: 80px 60px; background-color: #4C5A69; } .pricing-01 .text-center { text-align: center; } .pricing-01 h2, .pricing-01 h3, .pricing-01 h4, .pricing-01 p { color: #ffffff; font-weight: 300; } .pricing-01 h2 { font-size: 36px; margin-top: 0; margin-bottom: 20px; } .pricing-01 h4 { font-size: 18px; margin-bottom: 10px; } .pricing-01 .price-box { background-color: #3C4A59; margin: 40px 0 0; padding: 20px; border-radius: 6px; } .price-elem-wrapper { height: auto!important; } .pricing-01 .livicon-evo { margin: 0 auto 15px; } .pricing-01 .price-title { font-size: 26px; } .pricing-01 .price-text { font-size: 16px; opacity: 0.7; } .pricing-01 .price-value { margin-top: 15px; } .pricing-01 .price-sign { font-size: 20px; } .pricing-01 .price-main { font-size: 48px; font-weight: bolder; } .pricing-01 .price-subprice { font-size: 32px; } .pricing-01 .price-info { font-size: 16px; } .pricing-01 .price-btn { margin-top: 25px; margin-bottom: 30px; display: block; visibility: hidden; opacity: 0; -webkit-transition: visibility 0s, opacity 0.25s; -moz-transition: visibility 0s, opacity 0.25s; -o-transition: visibility 0s, opacity 0.25s; transition: visibility 0s, opacity 0.25s; } .pricing-01 .price-btn.active { visibility: visible; opacity: 1; } .pricing-01 .btn-submit { display: inline-block; position: relative; font-size: 14px; font-weight: 300; padding: 10px 20px; line-height: inherit; color: #fff; text-align: center; background: #009B90; border: 1px solid transparent; border-radius: 40px; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: 0.25s all; -moz-transition: 0.25s all; -o-transition: 0.25s all; transition: 0.25s all; } .pricing-01 .btn-submit:hover, .pricing-01 .btn-submit:focus { color: #fff; background: #07ABA0; text-decoration: none; } .pricing-01 .btn-submit:active, .pricing-01 .btn-submit:focus, .pricing-01 .btn-submit:active:focus { outline: 0; }
//Pricing Plans 01 animation controls $(document).ajaxStop(function() { $('.pricing-01 .price-box').on('click', function () { var that = $(this), others = $('.pricing-01 .price-box').not(this); that.find('.livicon-evo').each(function () { var icon = $(this); if (icon.liviconEvoState() === 'start') { icon.playLiviconEvo(); } }); that.find('.price-btn').each(function () { var btn = $(this); if ( ! btn.hasClass('active') ) { btn.addClass('active'); } }); others.find('.livicon-evo').each(function () { var icon = $(this); if (icon.liviconEvoState() === 'end') { icon.playLiviconEvo(); } }); others.find('.price-btn').each(function () { var btn = $(this); if ( btn.hasClass('active') ) { btn.removeClass('active'); } }); }); });