Circles

Using CSS3, circles and other shapes are extremely easy to create without the use of images or other scripts. You can use circles as buttons, or even place icons or other content inside of them.

Big thanks to Codeitdown for the article that inspired this add-on.

Fixed-Width

Below you can see some simple CSS and HTML for a fixed-width circle:

.circle {
  background: #ddd;
  border-radius: 50%;
  height: 150px;
  width: 150px;
}

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

Responsive

Now let's create a responsive circle that will take up the full width of its container, and scale down as the browser is resized.

.circle-responsive {
  background: #ddd;
  border-radius: 50%;
  height: 0;
  padding-bottom: 100%;
  width: 100%;
}

<div class="circle-responsive"></div>

With Text and Icon

Here is an example of the responsive circle that I created just above, except this time adding an extra class called .circle-content that will perfectly center any content that we choose to put in our circle, regardless of whether it is responsive or fixed-width.

Below I provide two examples of how the .circle-content class can be used. One with basic text, and one with an icon.

.circle-content {
  color: #fff;
  float: left;
  line-height: 1;
  margin-top: -0.5em;
  padding-top: 50%;
  text-align: center;
  width: 100%;
}

<div class="circle">
  <div class="circle-content">I am a Circle!</div>
</div>

<div class="circle-responsive">
  <div class="circle-content mega">
    <span class="icon user"></span>
  </div>
</div>