CTA Buttons by Site Style:

Originals: s27r | s31r | s36r | s42r | s43r | s47r | s50r s52r s54r | s60r
New: cta01 | cta02

s27r CTA demo:
HTML:
<div class="cta-btns s27r row no-gutters my-3">
  <div class="col-md mb-2">
    <a class="cta-btn inv" href="/newandusedcars?clearall=1" aria-label="See Inventory"><i class="fas fa-tachometer-alt"></i> See Inventory</a>
  </div>
  <div class="col-md mb-2">
    <a class="cta-btn credit" href="/creditapp" aria-label="Apply Online"><i class="fas fa-file-invoice-dollar"></i> Apply Online</a>
  </div>
  <div class="col-md mb-2">
    <a class="cta-btn directions" href="/trade" aria-label="Sell Your Car"><i class="fas fa-dollar-sign"></i> Sell Your Car</a>
  </div>
  <div class="col-md mb-2">
    <a class="cta-btn directions" href="/directions" aria-label="Visit Us"><i class="fas fa-map-marker-alt"></i> Visit Us</a>
  </div>
</div>

SCSS Extend:
.cta-btns.s27r {
  @extend %s27r-CTA;
}


s31r CTA demo:
HTML:
<div class="cta-btns s31r row my-3">
  <div class="col-sm-6 col-lg mb-3">
    <a aria-label="Our Inventory" href="/newandusedcars?clearall=1" class="cta-btn d-block">
      <div class="p-2">
        <h3>Our Inventory</h3>
        <p>View our inventory from [DealerName] in [DealerCity].</p>
      </div>
      <img alt="Our Inventory" class="cta-img img-fluid" src="/images/styles/s31r_filterBtn1.jpg">
    </a>
  </div>
  <div class="col-sm-6 col-lg mb-3">
    <a aria-label="Financing" href="/creditapp" class="cta-btn d-block">
      <div class="p-2">
        <h3>Financing</h3>
        <p>Bad Credit? No Credit? We have financing options for you.</p>
      </div>
      <img alt="Financing" class="cta-img img-fluid" src="/images/styles/s31r_filterBtn2.jpg">
    </a>
  </div>
  <div class="col-sm-6 col-lg mb-3">
    <a aria-label="Get Directions" href="/directions" class="cta-btn d-block">
      <div class="p-2">
        <h3>Get Directions</h3>
        <p>We are easily found at [DealerAddress] in [DealerCity].</p>
      </div>
      <img alt="Get Directions" class="cta-img img-fluid" src="/images/styles/s31r_filterBtn3.jpg">
    </a>
  </div>
  <div class="col-sm-6 col-lg mb-3">
    <a aria-label="Contact Us" href="/sendcomments" class="cta-btn d-block">
      <div class="p-2">
        <h3>Contact Us</h3>
        <p>One of our representatives will get back to you shortly.</p>
      </div>
      <img alt="Contact Us" class="cta-img img-fluid" src="/images/styles/s31r_filterBtn4.jpg">
    </a>
  </div>
</div>

SCSS Extend:
.cta-btns.s31r {
  @extend %s31r-CTA;
}


s36r CTA demo:
HTML:
<div class="filterBtns s36r row my-3">
  <div class="col-sm">
    <a href="/newandusedcars?clearall=1" class="button">
      <div class="filterBtnCircle">
        <i class="fas fa-tachometer-alt"></i>
        <h3>Inventory</h3>
        <p>View our inventory from [DealerName] in [DealerCity].</p>
      </div>
    </a>
  </div>
  <div class="col-sm">
    <a href="/creditapp" class="button">
      <div class="filterBtnCircle">
        <i class="fas fa-file-invoice-dollar"></i>
        <h3>Financing</h3>
        <p>Bad Credit? No Credit? We have financing options for all credit needs.</p>
      </div>
    </a>
  </div>
  <div class="col-sm">
    <a href="/directions" class="button">
      <div class="filterBtnCircle">
        <i class="fas fa-map-marker-alt"></i>
        <h3>Directions</h3>
        <p>We're easily located on [DealerAddress] in [DealerCity], [DealerState].</p>
      </div>
    </a>
  </div>
</div>

SCSS Extend:
.filterBtns.s36r {
  @extend %s36r-CTA;
}


s42r CTA demo:
HTML:
<div class="cta-btns s42r row my-3">
  <div class="col-md-4 mb-3">
    <a aria-label="View Inventory" href="newandusedcars?clearall=1" class="cta-btn d-block">
      <img class="img-fluid" src="/images/styles/s42r_filterBtn_01.jpg" alt="View Inventory" />
      <div class="cta-content p-2">
        <h3>View Inventory</h3>
        <p>View [DealerName]'s online showroom. [DealerCity] [DealerState]'s finest pre-owned vehicles.</p>
      </div>
    </a>
  </div>
  <div class="col-md-4 mb-3">
    <a aria-label="Apply Online" href="/creditapp" class="cta-btn d-block">
      <img class="img-fluid" src="/images/styles/s42r_filterBtn_02.jpg" alt="Apply Online" />
      <div class="cta-content p-2">
        <h3>Apply Online</h3>
        <p>Bad Credit? No Credit? Several financing options for all credit needs and situations. Apply online today!</p>
      </div>
    </a>
  </div>
  <div class="col-md-4 mb-3">
    <a aria-label="Get Directions" href="directions" class="cta-btn d-block">
      <img class="img-fluid" src="/images/styles/s42r_filterBtn_03.jpg" alt="Get Directions" />
      <div class="cta-content p-2">
        <h3>Get Directions</h3>
        <p>We are easily located at [DealerAddress], [DealerCity] [DealerState].</p>
      </div>
    </a>
  </div>
</div>

SCSS Extend:
.cta-btns.s42r {
  @extend %s42r-CTA;
}


s43r CTA demo:
HTML:
<div class="cta-btns s43r row my-3">
  <div class="col-md mb-3">
    <a aria-label="View Inventory" href="/newandusedcars?clearall=1" class="cta-btn d-block">
      <div class="cta-icon"><i class="fas fa-tachometer-alt"></i></div>
      <div class="cta-content">
        <h3>View Inventory</h3>
        <span>We offer the finest pre-owned vehicles.</span>
      </div>
    </a>
  </div>
  <div class="col-md mb-3">
    <a aria-label="Apply Online" href="/creditapp" class="cta-btn d-block">
      <div class="cta-icon"><i class="fas fa-file-invoice-dollar"></i></div>
      <div class="cta-content">
        <h3>Apply Online</h3>
        <span>Start our simple approval process!</span>
      </div>
    </a>
  </div>
  <div class="col-md mb-3">
    <a aria-label="Get Directions" href="/directions" class="cta-btn d-block">
      <div class="cta-icon"><i class="fas fa-map-marker-alt"></i></div>
      <div class="cta-content">
        <h3>Get Directions</h3>
        <span>We're easily located on [DealerAddress].</span>
      </div>
    </a>
  </div>
</div>

SCSS Extend:
.cta-btns.s43r {
  @extend %s43r-CTA;
}


s47r CTA demo:
HTML:
<div class="cta-btns s47r row my-3">
  <div class="col-md mb-3">
    <a class="cta-btn shine" href="/newandusedcars?clearall=1" aria-label="View Inventory">
      <img class="img-fluid" src="/images/styles/s47r_CTA02.jpg" alt="View Inventory" />
      <div class="p-2">
        <h3>View Inventory</h3>
        <p>View our inventory from [DealerName] in [DealerCity], [DealerState].</p>
      </div>
    </a>
  </div>
  <div class="col-md mb-3">
    <a class="cta-btn shine" href="/creditapp" aria-label="Get Approved">
      <img class="img-fluid" src="/images/styles/s47r_CTA01.jpg" alt="Get Approved" />
      <div class="p-2">
        <h3>Apply Today</h3>
        <p>Bad Credit? No Credit? We have financing options for all credit needs.</p>
      </div>
    </a>
  </div>
  <div class="col-md mb-3">
    <a class="cta-btn shine" href="/directions" aria-label="Visit Us">
      <img class="img-fluid" src="/images/styles/s47r_CTA03.jpg" alt="Visit Us" />
      <div class="p-2">
        <h3>Visit Us</h3>
        <p>We are easily located on [DealerAddress] in [DealerCity], [DealerState].</p>
      </div>
    </a>
  </div>
</div>

SCSS Extend:
.cta-btns.s47r {
  @extend %s47r-CTA;
}


s50r, s52r, s54r CTA demo:
HTML:
<div class="cta-btns s50r row my-3">
  <div class="col-md">
    <a class="cta-btn" href="/newandusedcars?clearall=1">
      <i class="fas fa-tachometer-alt"></i>
      <h3>Our Inventory</h3>
      <p>View our inventory from [DealerName] in [DealerCity], [DealerState].</p>
    </a>
  </div>
  <div class="col-md">
    <a class="cta-btn" href="/creditapp">
      <i class="fas fa-file-invoice-dollar"></i>
      <h3>Apply Today</h3>
      <p>Bad Credit? No Credit? We have financing options for all credit needs.</p>
    </a>
  </div>
  <div class="col-md">
    <a class="cta-btn" href="/directions">
      <i class="fas fa-map-marker-alt"></i>
      <h3>Get Directions</h3>
      <p>We are easily located on [DealerAddress] in [DealerCity], [DealerState].</p>
    </a>
  </div>
</div>

SCSS Extend:
.cta-btns.s50r {
  @extend %s50r-CTA;
}


s60r CTA demo:
HTML:
<div class="filterBtns s60r row my-3">
  <div class="filterInv col-md mb-2">
    <a aria-label="View Inventory" class="filterLink d-block" href="/newandusedcars?clearall=1">
      <div class="filterImgBlur">
        <div class="filterImg"></div>
        <span>We offer the finest pre-owned vehicles.</span>
      </div>
      <h2 class="text-center">View Inventory</h2>
    </a>
  </div>
  <div class="filterApply col-md mb-2">
    <a aria-label="Apply Online" class="filterLink d-block" href="/creditapp">
      <div class="filterImgBlur">
        <div class="filterImg"></div>
        <span>Start our simple approval process!</span>
      </div>
      <h2 class="text-center">Apply Online</h2>
    </a>
  </div>
  <div class="filterDirections col-md mb-2">
    <a aria-label="Get Directions" class="filterLink d-block" href="/directions">
      <div class="filterImgBlur">
        <div class="filterImg"></div>
        <span>We're easily located on [DealerAddress].</span>
      </div>
      <h2 class="text-center">Get Directions</h2>
    </a>
  </div>
</div>

SCSS Extend:
.filterBtns.s60r {
  @extend %s60r-CTA;
}


cta01 CTA demo:
HTML:
<div class="cta-btns cta01 row mx-auto my-3">
  <div class="col-md mb-3">
    <a aria-label="See Inventory" href="/newandusedcars?clearall=1" class="cta-btn d-block">
      <img alt="See Inventory" src="/images/styles/s47r_CTA02.jpg" class="img-fluid">
      <div class="cta-content">
        <h3>See Inventory</h3>
        <span>View our inventory from [DealerName] in [DealerCity], [DealerState].</span>
      </div>
    </a>
  </div>
  <div class="col-md mb-3">
    <a aria-label="Apply Today" href="/creditapp" class="cta-btn d-block">
      <img alt="Apply Today" src="/images/styles/s47r_CTA01.jpg" class="img-fluid">
      <div class="cta-content">
        <h3>Apply Today</h3>
        <span>Bad Credit? No Credit? We have financing options for all credit.</span>
      </div>
    </a>
  </div>
  <div class="col-md mb-3">
    <a aria-label="Visit Us" href="/directions" class="cta-btn d-block">
      <img alt="Visit Us" src="/images/styles/s47r_CTA03.jpg" class="img-fluid">
      <div class="cta-content">
        <h3>Visit Us</h3>
        <span>We are easily located on [DealerAddress] in [DealerCity], [DealerState].</span>
      </div>
    </a>
  </div>
</div>

SCSS Extend:
.cta-btns.cta01 {
  @extend %cta01-CTA;
}


cta02 CTA demo:
HTML:
<div class="cta-btns cta02 row my-3">
  <div class="col-md mb-3">
    <a aria-label="See Inventory" href="/newandusedcars?clearall=1" class="cta-btn d-block">
      <div class="cta-img">
        <img alt="See Inventory" src="/images/styles/s47r_CTA02.jpg" class="img-fluid" />
      </div>
      <div class="cta-content text-center">
        <p>View our inventory from [DealerName] in [DealerCity], [DealerState].</p>
        <span class="btn btn-primary d-block">See Inventory</span>
      </div>
    </a>
  </div>
  <div class="col-md mb-3">
    <a aria-label="Apply Today" href="/creditapp" class="cta-btn d-block">
      <div class="cta-img">
        <img alt="Apply Today" src="/images/styles/s47r_CTA01.jpg" class="img-fluid" />
      </div>
      <div class="cta-content text-center">
        <p>Bad Credit? No Credit? We have financing options for all credit.</p>
        <span class="btn btn-primary d-block">Apply Today</span>
      </div>
    </a>
  </div>
  <div class="col-md mb-3">
    <a aria-label="Visit Us" href="/directions" class="cta-btn d-block">
      <div class="cta-img">
        <img alt="Visit Us" src="/images/styles/s47r_CTA03.jpg" class="img-fluid" />
      </div>
      <div class="cta-content text-center">
        <p>We are easily located on [DealerAddress] in [DealerCity], [DealerState].</p>
        <span class="btn btn-primary d-block">Visit Us</span>
      </div>
    </a>
  </div>
</div>

SCSS Extend:
.cta-btns.cta02 {
  @extend %cta02-CTA;
}