Call To Actions - All Examples

Discover 21 Call To Actions examples available in Loopple

Call To Action 2

Component from Soft UI Design System Builder

<div class="py-5 draggable">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 text-start">
        <h4>Get tips & tricks every week</h4>
        <p class="mb-0">The latest news, articles and resources sent to your inbox weekely.</p>
      </div>
      <div class="col-lg-5 ms-auto text-end mt-4 mt-lg-0">
        <div class="row">
          <div class="col-lg-8 col-md-4 col-7">
            <div class="form-group mb-0">
              <div class="input-group">
                <div class="input-group">
                  <span class="input-group-text"><i class="ni ni-email-83"></i></span>
                  <input class="form-control" placeholder="Your Email" type="email" >
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-5 text-start">
            <button type="button" class="btn bg-gradient-primary mb-0 h-100">Subscribe</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Call To Action 1

Component from Soft UI Design System Builder

<div class="py-5 draggable">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h4 class="mb-1">Thank you for your support!</h4>
        <p class="lead mb-0">Delivering the best products</p>
      </div>
      <div class="col-lg-6 d-flex align-items-center">
        <a href="javascript:;" class="btn btn-twitter mb-0 me-2">
          <i class="fab fa-twitter me-1"></i> Twitter
        </a>
        <a href="javascript:;" class="btn btn-facebook mb-0 me-2">
          <i class="fab fa-facebook-square me-1"></i> Facebook
        </a>
        <a href="javascript:;" class="btn btn-tumblr mb-0 me-2">
          <i class="fab fa-tumblr me-1"></i> Tumblr
        </a>
        <a href="javascript:;" class="btn btn-dribbble mb-0">
          <i class="fab fa-dribbble me-1"></i> Dribbble
        </a>
      </div>
    </div>
  </div>
</div>

Call To Action With Text And Subscribe Input

Component from Motion Landing Library Builder

<div class="container mx-auto draggable">
    <div class="flex flex-col items-center justify-center w-full h-full my-auto text-center">
      <h2 class="w-full mb-4 text-4xl font-extrabold leading-tight text-dark-grey-900 font-display">Unlock Motion's Immediate Benefits</h2>
      <p class="mb-10 text-lg font-normal lg:w-6/12 text-grey-700">Experience Motion like never before with instant access. Our platform offers unparalleled features and advantages to elevate your experience.</p>
      <div class="flex flex-col items-center justify-center w-full gap-4 mb-4 md:flex-row">
        <div class="relative flex items-center">
          <span class="absolute ml-3">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-grey-700">
              <path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
            </svg>

          </span>
          <input type="search" placeholder="E-mail address" class="flex items-center py-2 pl-10 pr-3 text-sm font-medium border border-solid outline-none grow placeholder:text-dark-grey-500 placeholder:text-sm placeholder:font-medium border-grey-500 focus:border-grey-600 text-dark-grey-900 rounded-xl">
        </div>
        <button class="flex items-center px-4 py-2 text-sm font-bold text-white border rounded-xl border-purple-blue-500 bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300">Get Free Access</button>
      </div>
    </div>
  </div>

Call To Action With Text And Subscribe Input

Component from Motion Landing Library React Builder

<div data-type='div' className="container mx-auto draggable">
 <div data-type='div' className="flex flex-col items-center justify-center w-full h-full my-auto text-center">
   <h2 data-type='h2' className="w-full mb-4 text-4xl font-extrabold leading-tight text-dark-grey-900">
      Unlock Motion's Immediate Benefits
    </h2>
    <p data-type='p' className="mb-10 text-lg font-normal lg:w-6/12 text-grey-700">
      Experience Motion like never before with instant access. Our platform
      offers unparalleled features and advantages to elevate your experience.
    </p>
   <div data-type='div' className="flex flex-col items-center justify-center w-full gap-4 mb-4 md:flex-row">
     <div data-type='div' className="relative flex items-center">
       <span data-type='span' className="absolute ml-3">
         <svg data-type='svg'
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth="1.5"
            stroke="currentColor"
            className="w-5 h-5 text-grey-700"
          >
           <path data-type='path'
              strokeLinecap="round"
              d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25"
            />
          </svg>
        </span>
       <input data-type='input'
          type="search"
          placeholder="E-mail address"
          className="flex items-center py-2 pl-10 pr-3 text-sm font-medium border border-solid outline-none grow placeholder:text-dark-grey-500 placeholder:text-sm placeholder:font-medium border-grey-500 focus:border-grey-600 text-dark-grey-900 rounded-xl"
        />
      </div>
     <button data-type='button' className="flex items-center px-4 py-2 text-sm font-bold text-white border rounded-xl border-purple-blue-500 bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300">
        Get Free Access
      </button>
    </div>
  </div>
</div>