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.
The HTML is really stripped down and relies on standard bootstrap grid classes. All of the magic will take place in the 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.