A colorful variation on ghost buttons.

A current trend in web design is the use of ghost buttons, which are CTAs with transparent body, allowing the background to show through. This type of CTA aeshetically pleasing when well-executed, and work well with full-width hero images.

While working to develop the 2015 Client Summit website for Experian Marketing Services, (an archived version of the site can be viewed here) designed by Rose, I was challenged to build ghost CTAs with a twist. Instead of a solid color, the border would be filled with colorful gradient mirroring the aurora theme of the site.

I was rather proud of my solution, which preserved the responsiveness and system text (non-image) capability of the buttons, by using divs nested within a table element. Check out the CSS and HTML below:

HTML


<div class="gradient_border">
    <div class="gradient_border_top">
    </div>
    
    <table class="gradient_border_center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
    <tbody><tr>
    <td class="gradient_border_left"></td>
    <td class="gradient_border_inner"><a href="javascript:void(0);">ENTER NOW</a></td>
    <td class="gradient_border_right"></td>
    </tr>
    </tbody></table>
    
    <div class="gradient_border_bottom">
    </div>
</div>

CSS


.gradient_border {
	width: 100%;
	height: 100%;
}

.gradient_border_top {
	height: 2px;
	background-image: url("/2015clientsummit/img/gradient_border2.png");
	background-size: 100% auto;
}

.gradient_border_left {
	width: 2px;
	background-image: url("/2015clientsummit/img/gradient_border2.png");
	background-size: auto 100%;
}

.gradient_border_right {
	width: 2px;
	background-image: url("/2015clientsummit/img/gradient_border2.png");
	background-size: auto 100%;
	background-position: right center;
}

.gradient_border_bottom {
	height: 2px;
	background-image: url("/2015clientsummit/img/gradient_border2.png");
	background-size: 100% auto;
	background-position: bottom;
}

.gradient_border_inner:hover {
	background-size: 150% auto;
	background-position: bottom;
}


.body_gradient_link {
	font-size: 30px;
	display: inline-block;
}


.body_gradient_link .gradient_border_inner a {
	padding: 10px 40px;
	display: block;
	text-align: center;	
}

If you’d like to create the same button for your project, the gradient image referenced in the code can be downloaded here: