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.
Coming to the use of CSS shapes with text inside, here is a couple of illustrated examples below.
Have a look.
If you watch closely, you’ll realize that there are 4 parts to the 2 CTA buttons using CSS –
- the circle itself,
- the border around the circle,
- the shadow of the circle, and
- 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.
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.
CSS for the shape Circle
The CSS code for the circle shape with a color gradient of milk white and light blue will be –
background: linear-gradient(120deg, #fafafa, lightblue);
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 –
border: 7px solid #e9e9e9;
For the shadow –
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 –
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.