Convert the call to action box into a speech bubble

I wanted to make the call to action really pop! So I found this really simple css to make the box into a speech bubble.

First, insert a CTA module in a section. Then, go to module settings and select Advanced tab.

Inside the BEFORE box, add this:

border-radius: 0px;
position: absolute;
content: ”;
width: 0;
height: 0;
border-top: 100px solid #00d664;
border-right: 100px solid transparent;
right: 100px;
bottom: -100px;

And inside the MAIN ELEMENT box, add this:

border-radius: 50px;

Note: You should match the colour of the top border with the background colour of your CTA.

That’s it! Enjoy:)

Next how to modify the tooltip blurb

Your download is just a click away :)

Want to save time building beautiful websites? We can help

Learn about the latest free layouts, helpful tutorials and shortcuts to build better websites. No Spam. Only good stuff. Unsubscribe any time.

You have Successfully Subscribed!

Pin It on Pinterest