Circles with Text in CSS

When designing presentations and websites, I often like to use circles with text contained inside. To achieve this with some basic CSS, we just have to do something like the following.

.circle {
background: burlywood;
border: 10px solid #000;
color: #000;
width: 50vw;
height: 50vw;
font: 8.5vw Arial, sans-serif;

justify-content: center;
align-items: center;
border-radius: 100%;
text-align: center;
display: flex;
}

And then something as easy the following in your webpage:

<div class="circle">Subscribe Now</div>

Try it out! The result should be something similar to the below. Then just play around with the width / height / font size and customise the colors too to your website’s color palette. Enjoy!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store