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!

--

--

Ashok Khanna

Ashok Khanna

47 Followers

Masters in Quantitative Finance. Writing Computer Science articles and notes on topics that interest me, with a tendency towards writing about Lisp & Swift