3 CTA Buttons

cta-standard

<div class="row">
    <div class="customwidget">
    	<div class="ctacustom-container">
			<div class="row">
				<div class="col-sm-4">
					<a href="/community-lifestyle-data-area-stats-schools-and-local-businesses/">
						<div id="ctacustom-1" class="ctacustom">
							<img src="/wp-content/uploads/2014/10/chairs-deck-nature.jpg" />
							<div class="ctacustom-textbox">
								<p>Lifestyle Information</p>
							</div>
						</div> 
					</a>
				</div>
				<div class="col-sm-4">
					<a href="/welcome-to-property-email-alerts/">
						<div id="ctacustom-2" class="ctacustom">
							<img src="/wp-content/uploads/2014/10/house-stairs-fall.jpg" />
							<div class="ctacustom-textbox">
								<p>Property Email Alerts</p>
							</div>
						</div> 
					</a>
				</div>
				<div class="col-sm-4">
					<a href="/home-evaluation/">
						<div id="ctacustom-3" class="ctacustom">
							<img src="/wp-content/uploads/2014/10/tan-room-round.jpg" />
							<div class="ctacustom-textbox">
								<p>Home Evaluation</p>
							</div>
						</div> 
					</a>
				</div>
			</div>
    	</div>
    </div>
</div>

cta-standard-2

/********************
    CTA Standard
********************/

// Custom Widget Properties
.customwidget {
    width: 100%;
    float: left;
}

// CTA Custom: Each CTA Pod
.ctacustom {
    width:100%;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
    display: inline-block;
    background-color: rgba(199, 191, 178,0.5);
    -webkit-box-shadow: 0px 15px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 15px 15px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 15px 15px 0px rgba(0,0,0,0.75);
}

// CTA Custom: The Image
.ctacustom img {
    position: relative;
    width: 90%;
    height: 200px;
    padding-top: 15px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

// CTA Custom: The textbox
.ctacustom-textbox {
    position: relative;
    width: 90%;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    height:50px; 
    background-color:$brand-primary;
    -webkit-box-shadow: 0px 8px 5px -2px rgba(0,0,0,0.48);
    -moz-box-shadow: 0px 8px 5px -2px rgba(0,0,0,0.48);
    box-shadow: 0px 8px 5px -2px rgba(0,0,0,0.48);
}

// CTA Custom: The actual text within the textbox
.ctacustom-textbox p {
    text-align: center;
    padding-top: 11px;
    font-size: 18px;
    color: $brand-second;
}

// Media Queries
@media (max-width: 767px) {
    // Centering the entire div and changing width
    .ctacustom-container {
        float: none;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 521px) {
    // Changing width of entire container
	.ctacustom-container {
        width: 100%;
    }
}
This entry was posted in   .
Bookmark the   permalink.

Matt Barrett has written 1 article