Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Make a CTA Banner Using Only CSS

Well-crafted CTAs can boost conversion rates. Here's how to style a CTA banner only using CSS.

It's no secret that prominent and well-crafted Calls to Action can massively improve conversions on your website.

Plus, it can direct your website visitors to the pages you'd most want them to explore. For example, if you run an ecommerce clothing website and you're looking to encourage more views of your "Most Popular Items" page, an attention-grabbing CTA saying something like "Find Your Fresh Look" would inspire people to click on whatever item could give them the season's freshest looks.

However, CTAs can't just be text on a page. They have to be appropriately styled in order to grab your website visitors' attentions. Design features can also improve UX by providing clear direction for your readers.

Here's how to design a click-inducing CTA banner using only CSS:

Be sure to check your design's responsiveness by scaling your browser window larger or smaller.

HTML

The HTML is really stripped down and relies on standard bootstrap grid classes. All of the magic will take place in the CSS.

<div class="hero">
  <img src="https://raw.githubusercontent.com/solodev/cta-with-css/master/image-1.jpg" class="img-responsive" />
</div>
<div class="big-banner">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 banner-text text-center">
        <h2><a href="#">Start Your Free Trial Today</a></h2>
      </div>
    </div>
  </div>
</div>

CSS

With the CSS, pay particular attention to the various "big-banner" classes including the before and after pseudo classes attached to the principle H2. Those classes are what achieve the prominent design features of the piece.

@import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans');
body {
    font-family: 'Open Sans', sans-serif;
    font-family: 'Montserrat', sans-serif;
}
.hero img {
    width: 100%;
}
.big-banner {
  background-color: #ea2022;
  width: 100%;
  float: left;
}
.big-banner .banner-text {
  padding: 0;
}
.big-banner .banner-text h2 {
    font-size: 25px;
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    margin-top: 39px;
    margin-bottom: 41px;
    display: inline-block;
    position: relative;
}
.big-banner .banner-text h2:before {
	content: "";
	display: block;
	width: 128px;
	height: 32px;
	background: url(https://raw.githubusercontent.com/solodev/cta-with-css/master/image-2.png) no-repeat center center;
	position: absolute;
	top: 0;
	left: -158px;
}
.big-banner .banner-text h2:after {
	content: "";
	display: block;
	width: 128px;
	height: 32px;
	background: url(https://raw.githubusercontent.com/solodev/cta-with-css/master/image-3.png) no-repeat center center;
	position: absolute;
	top: 0;
	right: -158px;
}
.big-banner .banner-text h2 a {
    color: #fff;
}

Want to see how it all looks before committing to its use? Check out the JSFiddle below. Be sure to scale your browser windows to various sizes to see how these sections would look on mobile display.

Download from Github

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev