Call-to-action (CTA)

Guide your visitors through buying journey using strategic call-to-action (CTA).

CTA #1

What Happened to Bitcoin?

The Bitcoin Core (BTC) – network is in trouble due to high fees and slow transaction times. Bitcoin Cash (BCH) is the upgrade that solves these problems.

              
                <!-- CTA -->
                <div class="gradient-overlay-half-primary-v1 bg-img-hero" style="background-image: url(../../assets/img/1920x400/img1.jpg);">
                  <div class="container space-2">
                    <div class="row align-items-md-center">
                      <div class="col-md-8 mb-7 mb-md-0">
                        <!-- Content -->
                        <div class="media">
                          <span class="btn btn-lg btn-icon btn-soft-light rounded-circle mr-4">
                            <span class="fab fa-bitcoin btn-icon__inner"></span>
                          </span>
                          <div class="media-body">
                            <h2 class="text-white font-weight-semi-bold">What Happened to <span class="text-warning">Bitcoin?</span></h2>
                            <p class="text-white-70 mb-0"><strong class="text-white">The Bitcoin Core (BTC)</strong> – network is in trouble due to high fees and slow transaction times. Bitcoin Cash (BCH) is the upgrade that solves these problems.</p>
                          </div>
                        </div>
                        <!-- End Content -->
                      </div>

                      <div class="col-md-4 text-md-right">
                        <!-- Button Link -->
                        <a class="btn btn-warning transition-3d-hover" href="#">
                          Cash with Our Guide
                          <span class="fas fa-angle-right ml-2"></span>
                        </a>
                        <!-- End Button Link -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End CTA -->
              
            

CTA #2

Front Template – the simplest and fastest way to build sites. Start Enterprise Trial
              
                <!-- CTA Section -->
                <div class="bg-primary text-white text-center">
                  <div class="container space-1">
                    <span class="h6 d-block d-lg-inline-block font-weight-light mb-lg-0">
                      <span class="font-weight-semi-bold">Front Template</span> – the simplest and fastest way to build sites.
                    </span>
                    <a class="btn btn-sm btn-white transition-3d-hover font-weight-normal ml-3" href="#">Start Enterprise Trial</a>
                  </div>
                </div>
                <!-- End CTA Section -->
              
            

CTA #3

Join over 35,000 happy customers selling houses online

              
                <!-- CTA -->
                <div class="container text-center">
                  <!-- Title -->
                  <div class="w-md-60 text-center mx-auto mb-6">
                    <h2 class="font-weight-medium">Join over <strong class="text-primary">35,000</strong> happy customers selling houses online</h2>
                  </div>
                  <!-- End Title -->

                  <div class="mb-6">
                    <a class="btn btn-primary btn-wide transition-3d-hover" href="#">Get Started Now</a>
                  </div>

                  <!-- Fancybox -->
                  <div class="d-flex justify-content-center">
                    <a class="js-fancybox media align-items-center u-media-player" href="javascript:;"
                       data-src="//vimeo.com/167434033"
                       data-speed="700"
                       data-animate-in="zoomIn"
                       data-animate-out="zoomOut"
                       data-caption="Front - Responsive Website Template">
                      <span class="u-media-player__icon u-media-player__icon--primary mr-3">
                        <span class="fas fa-play u-media-player__icon-inner"></span>
                      </span>
                      <span class="media-body">
                        Watch video
                      </span>
                    </a>
                  </div>
                  <!-- End Fancybox -->
                </div>
                <!-- End CTA -->
              
            
              
                <!-- CSS Implementing Plugins -->
                <link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.fancybox.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of popups
                    $.HSCore.components.HSFancyBox.init('.js-fancybox');
                  });
                </script>
              
            

CTA #4

Ready to get started?

Front Template – the simplest and fastest way to build sites.

Start Free Trial
Image Description
Image Description
              
                <!-- CTA Section -->
                <div id="SVGctaSection" class="svg-preloader position-relative gradient-half-primary-v1 text-center z-index-2 overflow-hidden">
                  <div class="container space-2">
                    <h3 class="h2 text-info font-weight-semi-bold mb-3">Ready to get started?</h3>
                    <p class="lead text-white mb-5">
                      <span class="font-weight-semi-bold">Front Template</span> – the simplest and fastest way to build sites.
                    </p>
                    <a class="btn btn-white btn-wide transition-3d-hover" href="#">Start Free Trial</a>
                  </div>

                  <!-- SVG Component -->
                  <figure class="position-absolute top-0 left-0 w-100 max-width-27 z-index-n1">
                    <img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-8.svg" alt="Image Description"
                         data-parent="#SVGctaSection">
                  </figure>
                  <!-- End SVG Component -->

                  <!-- SVG Component -->
                  <figure class="position-absolute bottom-0 right-0 w-100 max-width-27 z-index-n1">
                    <img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-5.svg" alt="Image Description"
                         data-parent="#SVGctaSection">
                  </figure>
                  <!-- End SVG Component -->
                </div>
                <!-- End CTA Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

CTA #5

Front makes you look at things from a different perspectives.

Get Started
Image Description
              
                <!-- CTA Section -->
                <div id="SVGshowcaseMockup2" class="svg-preloader container">
                  <div class="bg-primary text-white shadow-primary-lg rounded p-5 p-md-9">
                    <div class="row justify-content-lg-between align-items-md-center">
                      <div class="col-md-5 mb-7 mb-md-0">
                        <!-- Info -->
                        <div class="mb-5">
                          <h2 class="font-weight-normal">Front makes you look at things from a different perspectives.</h2>
                        </div>
                        <a class="btn btn-white btn-wide btn-pill transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/">
                          Get Started
                          <span class="fas fa-arrow-right text-primary font-size-1 ml-2"></span>
                        </a>
                        <!-- End Info -->
                      </div>

                      <div class="col-md-7 col-lg-5">
                        <!-- Showcase Mockup -->
                        <figure class="ie-showcase-mockup-2">
                          <img class="js-svg-injector" src="../../assets/svg/illustrations/showcase-mockup-2.svg" alt="Image Description"
                               data-img-paths='[
                                 {"targetId": "#SVGshowcaseMockup2Img1", "newPath": "../../assets/img/435x550/img1.jpg"}
                               ]'
                               data-parent="#SVGshowcaseMockup2">
                        </figure>
                        <!-- End Showcase Mockup -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End CTA Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

CTA #6

SVG

Grow your business with Front Pay

From startups to Fortune 500s, explore how millions of businesses use Front Pay to start and scale their companies. See our customers

              
                <!-- CTA -->
                <div class="container">
                  <div class="w-lg-75 mx-lg-auto">
                    <div class="media d-block d-sm-flex">
                      <figure id="iconGrowingBusiness" class="svg-preloader ie-height-90 w-100 max-width-15 mr-4 mb-3 mb-sm-0">
                        <img class="js-svg-injector" src="../../assets/svg/illustrations/growing-business.svg" alt="SVG"
                             data-parent="#iconGrowingBusiness">
                      </figure>
                      <div class="media-body">
                        <h4 class="h6">Grow your business with Front Pay</h4>
                        <p>From startups to Fortune 500s, explore how millions of businesses use Front Pay to start and scale their companies.
                          <a href="#">
                            See our customers
                            <span class="fas fa-angle-right ml-1"></span>
                          </a>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End CTA -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

CTA #7

Create better experiences with Front Pay

Image Description
              
                <!-- CTA Section -->
                <div id="SVGCTA7" class="svg-preloader position-relative">
                  <div class="container space-2">
                    <div class="row justify-content-lg-between align-items-lg-center text-center text-lg-left">
                      <div class="col-lg-5 mb-5 mb-lg-0">
                        <h3 class="h2 text-white font-weight-semi-bold mb-0">Create better experiences with Front Pay</h3>
                      </div>

                      <div class="col-lg-5 text-lg-right">
                        <a class="btn btn-indigo btn-wide btn-pill transition-3d-hover mr-3" href="#">Get Started</a>
                        <a class="btn btn-white btn-wide btn-pill text-primary shadow-soft transition-3d-hover" href="#">Learn More</a>
                      </div>
                    </div>
                  </div>

                  <!-- SVG Top Shape -->
                  <figure class="gradient-overlay-half-primary-v3 position-absolute top-0 right-0 bottom-0 left-0 z-index-n1 overflow-hidden">
                    <img class="js-svg-injector d-none d-md-block" src="../../assets/svg/components/circles.svg" alt="Image Description"
                         data-parent="#SVGCTA7">
                  </figure>
                  <!-- End SVG Top Shape -->
                </div>
                <!-- End CTA Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

CTA #8

Revolutionizing the way your team works!

Image Description
              
                <!-- CTA Section -->
                <div class="container space-2">
                  <div class="w-lg-85 mx-lg-auto">
                    <div id="SVGCTA8" class="svg-preloader card border-0 shadow overflow-hidden p-5">
                      <div class="row justify-content-md-start align-items-md-center text-center text-md-left">
                        <div class="col-md-8 col-lg-5 offset-lg-3 mb-3 mb-md-0">
                          <h3 class="h4 text-indigo font-weight-medium mb-0">Revolutionizing the way your team works!</h3>
                        </div>

                        <div class="col-md-4 text-md-right">
                          <a class="btn btn-primary transition-3d-hover" href="#">Explore Docs</a>
                        </div>
                      </div>

                      <!-- SVG Component -->
                      <figure class="w-35 position-absolute top-0 left-0">
                        <div class="mt-n11 ml-n11">
                          <img class="js-svg-injector" src="../../assets/svg/components/half-circle-2.svg" alt="Image Description"
                               data-parent="#SVGCTA8">
                        </div>
                      </figure>
                      <!-- End SVG Component -->
                    </div>
                  </div>
                </div>
                <!-- End CTA Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

CTA #9

Start your demo with Front today

Schedule a Demo
              
                <!-- CTA Section -->
                <div class="bg-primary text-center bg-img-hero" style="background-image: url(../../assets/svg/components/abstract-shapes-15.svg);">
                  <div class="container space-2">
                    <div class="mb-5">
                      <h3 class="h2 text-white font-weight-normal">Start your demo with Front today</h3>
                    </div>
                    <a class="btn btn-white transition-3d-hover" href="#">Schedule a Demo</a>
                  </div>
                </div>
                <!-- End CTA Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

CTA #10

Save up to 30% with orders above $50

              
                <!-- CTA -->
                <div class="bg-img-hero rounded p-6 mb-5" style="background-image: url(../../assets/img/1920x800/img19.jpg);">
                  <div class="row align-items-md-center">
                    <div class="col-md-8 mb-3 mb-md-0">
                      <h1 class="h4 font-weight-medium mb-0">Save up to 30% with orders above $50</h1>
                    </div>
                    <div class="col-md-4 text-md-right">
                      <a class="btn btn-primary btn-pill transition-3d-hover px-5" href="#">Shop Now</a>
                    </div>
                  </div>
                </div>
                <!-- End CTA -->