Circles with Text in CSS

Quick Tips in Web Development

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!