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.

Make a CTA Banner Using Only 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.

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.

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.

Author

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

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.