CTA Buttons by Site Style:
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;
}