How to Create Amazing CTA Buttons Using CSS Shapes with Text Inside

CSS Shape with Text Inside

On the subscription page for Cool Tech Hacks, I’ve used the following CSS shapes with text inside. Looks like viewers like them, and some indeed sought to know how to do this.

By the way, if you want a tech hack on something this website caters to, do not hesitate to tell us. If we know what you want to know, we’ll certainly do a post for you in these columns.

Coming to the use of CSS shapes with text inside, here is a couple of illustrated examples below.

Have a look.

White circular CTA button using CSS shapes with text inside
Round purple CTA button using CSS shape with text inside

If you watch closely, you’ll realize that there are 4 parts to the 2 CTA buttons using CSS –

  1. the circle itself,
  2. the border around the circle,
  3. the shadow of the circle, and
  4. the text inside the CSS shape of circle.

More examples of CSS shapes with text inside

As can be expected, if you can make a circle with CSS, why not a rectangle with rounded corners, an oval, or an egg shape, for that matter.

Get a glimpse of all these CSS shapes with text inside, functioning as CTA buttons, each for a different purpose, and quite common on the web.

3 CTA buttons using CSS shapes with text inside

Working on CSS to create the circle as a CTA button

As I’ve mentioned above, the CSS for the circular CSS button on the subscription page has 4 parts to it. This is what we will see now.

Let’s say the color of the button will be a gradient between white and light blue, and that of the text inside be light green, which is the default link color for this website. This being an active button pointing – where else but – to the subscription page, therefore, on hover, the color of the text would change to purple blue.

Let’s begin.

CSS for the shape Circle

The CSS code for the circle shape with a color gradient of milk white and light blue will be –

#circle-shape {
width: 150px;
height: 150px;
background: linear-gradient(120deg, #fafafa, lightblue);
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
border-radius: 75px;
}

You can also mention 50% for the radii figures.

CSS for the Border & Shadow around the shape

These are easy.
We make use of CSS Property for border and shadow as under.

For the border –

#circle-shape {
border: 7px solid #e9e9e9;
}

For the shadow –

#circle-shape {
box-shadow: 0px 15px 10px -10px #666;
}

CSS for the text inside the shape

Notice that the dollar sign is smaller than the figure 7, similarly the letters denoting ‘per month’ are smaller than the figure 7.

Also, only the text is made a hyperlink, and not the circle shape.

So here is the CSS code for the texts –

<a style="font-size: xx-large; line-height: 1.6;" href=""><sup style="vertical-align: middle;">$</sup><span style="font-size: 70px;">7</span>/mo</a>

Combining all to create CSS shape with text inside for CTA button

Let’s now combine all the CSS codes for the circular CTA button.

You’ll note that I’ve created the button as a paragraph and used the margin figures to position it in the middle of the bound area.

This is how the code will now look like –

<p style="width: 150px; height: 150px; margin: 35px auto 0; text-align: center; font-size: xx-large; line-height: 1.7; background: linear-gradient(120deg, #fafafa, lightblue); -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 70px; border: 7px solid #e9e9e9; box-shadow: 0px 15px 10px -10px #666;"><a title="Special Festive Offer - Only $7/mo" href="https://coolhacks.hubskills.com/subscribe-to-tech-hacks"><sup style="vertical-align: middle;">$</sup><span style="font-size: 70px;">7</span>/mo</a></p>

And the CTA button will be as under –

$7/mo

Now that you’ve seen the CSS codes for creating a completely round CTA button, let’s shift attention to the codes for all the other CTA buttons above, using CSS shapes with text inside.

This I’m going to explain to you below in details, starting with the oval shape, and I'll also give you resources for many other CSS shapes should you want to use them for your needs.

Read the full post as a subscriber and enjoy these benefits!

  • All the supercool content creation hacks
  • Ready-to-use templates for video, animation, etc.
  • Quick tips to drive your business
  • Mini courses to help you succeed
  • Priority assistance for specific needs, and more..

Scroll to top