Main Content
Call To Action Buttons
Standard Wireframing Elements
Close
HTML
<section class="aios-cta-style-1">
<div class="container">
<div class="row">
<div class="col-md-4 cta-list">
<a href="#">Find My Dream Home</a>
</div>
<div class="col-md-4 cta-list">
<a href="#">What’s My Home Worth?</a>
</div>
<div class="col-md-4 cta-list">
<a href="#">Help Me Relocate</a>
</div>
</div>
</div>
</section>CSS
.aios-cta-style-1{
margin: 20px 0;
}
.aios-cta-style-1 .cta-list{
margin-bottom: 30px;
}
.aios-cta-style-1 .cta-list a{
display: block;
width: 100%;
height: 72px;
text-align: center;
background: #d7d7d7;
color: #fff;
font-weight: bold;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.aios-cta-style-1 .cta-list a:hover{
background: #169bc6;
}
.aios-cta-style-1 .cta-list a:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
CSS Mobile
Javascript
Close
HTML
<section class="aios-cta-style-2">
<div class="container">
<div class="row">
<div class="col-md-4 cta-list">
<a href="#"><span>Find My Dream Home</span></a>
</div>
<div class="col-md-4 cta-list">
<a href="#"><span>What’s My Home Worth?</span></a>
</div>
<div class="col-md-4 cta-list">
<a href="#"><span>Help Me Relocate</span></a>
</div>
</div>
</div>
</section>CSS
.aios-cta-style-2{
margin: 20px 0;
}
.aios-cta-style-2 .cta-list{
margin-bottom: 30px;
}
.aios-cta-style-2 .cta-list a{
display: block;
width: 100%;
height: 222px;
text-align: center;
background: #d7d7d7;
color: #fff;
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.aios-cta-style-2 .cta-list a:hover{
background: #169bc6;
}
.aios-cta-style-2 .cta-list a:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.aios-cta-style-2 .cta-list a span{
display: inline-block;
vertical-align: middle;
}
CSS Mobile
@media only screen and (max-width: 767px){
.aios-cta-style-2 .cta-list a{
height: 150px;
}
}Javascript
Close
HTML
<section class="aios-cta-style-3">
<div class="container">
<div class="row">
<div class="col-md-4 cta-list">
<a href="#">Find My Dream Home <i class="ai-font-arrow-b-n"></i></a>
</div>
<div class="col-md-4 cta-list">
<a href="#">What’s My Home Worth? <i class="ai-font-arrow-b-n"></i></a>
</div>
<div class="col-md-4 cta-list">
<a href="#">Help Me Relocate <i class="ai-font-arrow-b-n"></i></a>
</div>
</div>
</div>
</section>CSS
.aios-cta-style-3{
margin: 20px 0;
}
.aios-cta-style-3 .cta-list{
margin-bottom: 30px;
}
.aios-cta-style-3 .cta-list a{
display: block;
width: 100%;
height: 72px;
text-align: center;
background: transparent;
border: solid 1px #959595;
color: #898989;
font-weight: 400;
font-size: 17px;
text-transform: uppercase;
text-decoration: none;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
position: relative;
-webkit-transition: all .25s ease-in-out;
}
.aios-cta-style-3 .cta-list a i{
position: absolute;
right: 6%;
top: 50%;
margin-top: -8.5px;
}
.aios-cta-style-3 .cta-list a:hover{
background: #169bc6;
color: #fff;
}
.aios-cta-style-3 .cta-list a:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.aios-cta-style-3 .cta-list a span{
display: inline-block;
vertical-align: middle;
}
CSS Mobile
Javascript
Close
HTML
<section class="aios-cta-style-4">
<div class="container">
<div class="row">
<div class="col-md-4 cta-list">
<a href="#"><span>Find My <strong>Dream <br>Home</strong> </span></a>
</div>
<div class="col-md-4 cta-list">
<a href="#"><span>What’s My <strong>Home <br>Worth?</strong></span></a>
</div>
<div class="col-md-4 cta-list">
<a href="#"><span>Help Me <strong>Relocate</strong></span></a>
</div>
</div>
</div>
</section>CSS
.aios-cta-style-4{
margin: 20px 0;
}
.aios-cta-style-4 .cta-list{
margin-bottom: 30px;
}
.aios-cta-style-4 .cta-list a{
display: block;
width: 100%;
height: 263px;
text-align: center;
background: transparent;
color: #fff;
background: #d7d7d7;
font-weight: 400;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
position: relative;
-webkit-transition: all .25s ease-in-out;
max-width: 263px;
max-height: 263px;
border-radius: 50%;
margin: 0 auto;
}
.aios-cta-style-4 .cta-list a span{
display: inline-block;
vertical-align: middle;
}
.aios-cta-style-4 .cta-list a strong{
display: block;
font-size: 30px;
font-weight: 700;
}
.aios-cta-style-4 .cta-list a:hover{
background: #169bc6;
color: #fff;
}
.aios-cta-style-4 .cta-list a:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.aios-cta-style-4 .cta-list a span{
display: inline-block;
vertical-align: middle;
}
CSS Mobile
Javascript
Close
HTML
<section class="aios-cta-style-5">
<div class="container">
<div class="row">
<div class="col-md-4 cta-list">
<a href="#">Find My <strong>Dream Home</strong> <i class="ai-font-arrow-b-n"></i>
<p>Let us Help You Today!</p>
</a>
</div>
<div class="col-md-4 cta-list">
<a href="#">What’s My <strong>Home Worth?</strong> <i class="ai-font-arrow-b-n"></i>
<p>Your Home’s True Market Value</p>
</a>
</div>
<div class="col-md-4 cta-list">
<a href="#">Help Me <strong>Relocate</strong> <i class="ai-font-arrow-b-n"></i>
<p>We help You Find Your New Home</p>
</a>
</div>
</div>
</div>
</section>CSS
.aios-cta-style-5{
margin: 20px 0;
}
.aios-cta-style-5 .cta-list{
margin-bottom: 30px;
}
.aios-cta-style-5 .cta-list a{
display: block;
width: 100%;
height: auto;
text-align: left;
color: #898989;
font-weight: 400;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
border-bottom: 1px solid #b7b7b7;
}
.aios-cta-style-5 .cta-list a strong{
display: block;
font-size: 30px;
font-weight: 700;
color: #009bbb;
}
.aios-cta-style-5 .cta-list a i{
position: absolute;
right: 6%;
top: 50%;
margin-top: -14px;
color: #009bbb;
font-size: 28px;
}
.aios-cta-style-5 .cta-list a:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.aios-cta-style-5 .cta-list a span{
display: inline-block;
vertical-align: middle;
}
.aios-cta-style-5 .cta-list a p{
font-weight: 300;
font-size: 15px;
color: #5e5e5e;
font-style: italic;
}
CSS Mobile
Javascript
Close
HTML
<section class="aios-cta-style-6">
<div class="container">
<div class="row">
<div class="col-md-4 cta-list">
<a href="#">find my dream home</a>
</div>
<div class="col-md-4 cta-list">
<a href="#">what’s my home worth?</a>
</div>
<div class="col-md-4 cta-list">
<a href="#">help me relocate</a>
</div>
</div>
</div>
</section>CSS
.aios-cta-style-6{
margin: 20px 0;
}
.aios-cta-style-6 .cta-list{
margin-bottom: 30px;
}
.aios-cta-style-6 .cta-list a{
display: block;
width: 100%;
height: 72px;
text-align: center;
background: #d7d7d7;
color: #fff;
font-weight: bold;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
-webkit-border-radius: 38px;
-moz-border-radius: 38px;
border-radius: 38px;
background-color: #d7d7d7;
}
.aios-cta-style-6 .cta-list a:hover{
background: #169bc6;
}
.aios-cta-style-6 .cta-list a:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
CSS Mobile
Javascript
Close
HTML
<section class="aios-cta-style-7">
<div class="container">
<div class="row">
<div class="col-md-4 cta-list">
<a href="#">find my dream home</a>
</div>
<div class="col-md-4 cta-list">
<a href="#">what’s my home worth?</a>
</div>
<div class="col-md-4 cta-list">
<a href="#">help me relocate</a>
</div>
</div>
</div>
</section>CSS
.aios-cta-style-7{
margin: 20px 0;
}
.aios-cta-style-7 .cta-list{
margin-bottom: 30px;
}
.aios-cta-style-7 .cta-list a{
display: block;
width: 100%;
height: 72px;
text-align: center;
background: transparent;
border: solid 1px #b1b1b1;
color: #898989;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
-webkit-border-radius: 38px;
-moz-border-radius: 38px;
border-radius: 38px;
}
.aios-cta-style-7 .cta-list a:hover{
background: #169bc6;
color: #fff;
}
.aios-cta-style-7 .cta-list a:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
CSS Mobile
Javascript
Close
HTML
<section class="aios-cta-style-8">
<div class="container">
<div class="row">
<div class="col-md-4 cta-list">
<a href="#">
<em class="ai-font-magnifying-glass-e"></em>
find my dream home
</a>
</div>
<div class="col-md-4 cta-list">
<a href="#">
<em class="ai-font-package-financing"></em>
what’s my home worth?
</a>
</div>
<div class="col-md-4 cta-list">
<a href="#">
<em class="ai-font-location-c"></em>
help me relocate
</a>
</div>
</div>
</div>
</section>CSS
.aios-cta-style-8{
margin: 20px 0;
}
.aios-cta-style-8 .cta-list{
margin-bottom: 30px;
}
.aios-cta-style-8 .cta-list a{
display: block;
width: 100%;
height: 72px;
text-align: center;
background: transparent;
border: solid 1px #b1b1b1;
color: #898989;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.aios-cta-style-8 .cta-list a em{
color: #009bbb;
font-size: 25px;
display: inline-block;
vertical-align: middle;
margin-right: 7px;
}
.aios-cta-style-8 .cta-list a:hover{
background: #169bc6;
color: #fff;
}
.aios-cta-style-8 .cta-list a:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
CSS Mobile
Javascript
Close
HTML
<section class="aios-cta-style-9">
<div class="container">
<div class="row">
<div class="col-md-4 cta-list">
<a href="#">
<em class="ai-font-magnifying-glass-e"></em>
find my dream home
</a>
</div>
<div class="col-md-4 cta-list">
<a href="#">
<em class="ai-font-package-financing"></em>
what’s my home worth?
</a>
</div>
<div class="col-md-4 cta-list">
<a href="#">
<em class="ai-font-location-c"></em>
help me relocate
</a>
</div>
</div>
</div>
</section>CSS
.aios-cta-style-9{
margin: 20px 0;
}
.aios-cta-style-9 .cta-list{
margin-bottom: 30px;
}
.aios-cta-style-9 .cta-list a{
display: block;
width: 100%;
text-align: center;
background: transparent;
border: solid 1px #b1b1b1;
color: #898989;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
padding: 30px 0
}
.aios-cta-style-9 .cta-list a em{
color: #009bbb;
font-size: 30px;
text-align: center;
display: block;
margin-bottom: 10px;
}
.aios-cta-style-9 .cta-list a:hover{
background: #169bc6;
color: #fff;
}
.aios-cta-style-9 .cta-list a:hover em{
color: #fff;
}
.aios-cta-style-9 .cta-list a:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
CSS Mobile
Javascript
Close
HTML
<section class="aios-cta-style-10">
<div class="container">
<div class="row">
<div class="col-md-4 cta-list">
<a href="#">
<em class="ai-font-magnifying-glass-e"></em>
find my dream home
</a>
</div>
<div class="col-md-4 cta-list">
<a href="#">
<em class="ai-font-package-financing"></em>
what’s my home worth?
</a>
</div>
<div class="col-md-4 cta-list">
<a href="#">
<em class="ai-font-location-c"></em>
help me relocate
</a>
</div>
</div>
</div>
</section>CSS
.aios-cta-style-10{
margin: 20px 0;
}
.aios-cta-style-10 .cta-list{
margin-bottom: 30px;
}
.aios-cta-style-10 .cta-list a{
display: block;
width: 100%;
text-align: center;
background: transparent;
border: solid 1px #b1b1b1;
color: #898989;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
padding: 30px 0
}
.aios-cta-style-10 .cta-list a em{
color: #009bbb;
font-size: 50px;
text-align: center;
display: block;
margin-bottom: 10px;
}
.aios-cta-style-10 .cta-list a:hover{
background: #169bc6;
color: #fff;
}
.aios-cta-style-10 .cta-list a:hover em{
color: #fff;
}
.aios-cta-style-10 .cta-list a:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
CSS Mobile
Javascript