CTA Buttons: CTA Circles

293-2

<div class="row">
    <div class="ctacontain">
        <div class="col-sm-3">
                    <a href="/home-evaluation/" class="home-box-href">
                        <div class="home-box home-cta-1">
                            <div class="row">        
                                <div class="col-sm-12">
                                    <div class="cta-image">
                                        <img class="img-responsive box-image" src="/wp-content/uploads/home.png">
                                   </div>
                                </div>
                                <div class="col-sm-12">
                                    <h3 class="home-box-title">Home Evaluation</h3>                                                                          
                                    <div class="clearfix"></div>
                                </div> <!-- close col-sm-6 -->                     
                            </div> <!-- close home box -->
                        </div> <!-- close row -->     
                    </a>
                </div>
        
        <div class="col-sm-3">
                    <a href="/welcome-to-property-email-alerts/" class="home-box-href">
                        <div class="home-box home-cta-2">
                            <div class="row">        
                                <div class="col-sm-12">
                                    <div class="cta-image">
                                        <img class="img-responsive box-image" src="/wp-content/uploads/email.png">
                                   </div>
                                </div>
                                <div class="col-sm-12">
                                    <h3 class="home-box-title">Property Alerts</h3>                                                                       
                                    <div class="clearfix"></div>
                                </div> <!-- close col-sm-6 -->                     
                            </div> <!-- close home box -->
                        </div> <!-- close row -->     
                    </a>
                </div>
        
        <div class="col-sm-3">
                    <a href="/community-lifestyle-data-area-stats-schools-and-local-businesses/" class="home-box-href">
                        <div class="home-box home-cta-3">
                            <div class="row">        
                                <div class="col-sm-12">
                                    <div class="cta-image">
                                        <img class="img-responsive box-image" src="/wp-content/uploads/search.png">
                                   </div>
                                </div>
                                <div class="col-sm-12">
                                    <h3 class="home-box-title">Community Lifestyle Data</h3>                                                                             
                                    <div class="clearfix"></div>
                                </div> <!-- close col-sm-6 -->                     
                            </div> <!-- close home box -->
                        </div> <!-- close row -->     
                    </a>
                </div>
        
        <div class="col-sm-3">
                    <a href="/contact/" class="home-box-href">
                        <div class="home-box home-cta-4">
                            <div class="row">        
                                <div class="col-sm-12">
                                    <div class="cta-image">
                                        <img class="img-responsive box-image" src="/wp-content/uploads/phone.png">
                                   </div>
                                </div>
                                <div class="col-sm-12">
                                    <h3 class="home-box-title">Contact Us</h3>                                                                  
                                    <div class="clearfix"></div>
                                </div> <!-- close col-sm-6 -->                     
                            </div> <!-- close home box -->
                        </div> <!-- close row -->     
                    </a>
                </div>
    </div>
</div>

294-2

/********************
    CTA Circles
********************/

.ctacontain{
    text-align: center;
    border-left: 3px solid $brand-primary;
    border-right: 3px solid $brand-primary;
    background-color: rgba(0,0,0,0.5);
    border-radius: 0;
    float: left;
    width: 100%;
    color: white;
}

.needsborder {
    border: 4px solid #C3CBD0;
    border-radius: 50%;
    width: 100%;
    height: 140px;
}

.home-box {
    padding: 0.7em;
}

.ctacontain > .col-sm-2 {
    float: none;
    display: inline-block;
    vertical-align: top;
}
  
h3.home-box-title {
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1em;
}

p.home-box-content {
    color: white;
}

.img-responsive {
    margin: 0 auto;
    margin-top: 5px;
}

.cta-image {
    border: 2px solid white;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 50%;
}
This entry was posted in   .
Bookmark the   permalink.

Matt Barrett has written 1 article