Simple Multiple Step


enter image description here

JSfiddle DEMO


<div id="status-buttons" class="text-center">
  <a href="/1"><span>1</span></a>
  <a href="/2"><span>2</span></a>
  <a href="/3"><span>3</span></a>


#status-buttons a {
  font-size: 22px;
  margin-right: 20px; }
  #status-buttons a span {
    color: white;
    line-height: 60px;
    padding-top: 5px; 

#status-buttons span {
  background: #00BC8C; }

.circle, #status-buttons a {
  width: 56px;
  height: 56px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background: #5dc5c5;
  margin-right: 10px; 


Attempted the circles. As in the image, I am stuck with lines between the circles. Tried add border-bottom, it does not appear. Not think that width in div can be useful for lines? Is there any way around that so when click different link on circle, number of circles and its lines will have active classes?

Another question: Supposedly, the links take us to the different page with different form, is it possible to make circle active? Only the way I could think is to make circle active in each page, so if any link page is clicked, for example, click #2, it will show 1 and 2 circles active. It might be a cheat. Is there another better way around it?

Help appreciated.

Problem courtesy of: joe


I did something similar recently.

.progressbar {
        margin-top: 40px;
        margin-bottom: 30px;
        overflow: hidden;
        counter-reset: step; 
    .progressbar li {
        list-style-type: none;
        color: #555555;
        text-transform: uppercase;
        text-align: center;
        font-size: 9px;
        width: 20%;
        float: left;
        position: relative; 
    .progressbar li:before {
        content: counter(step);
        counter-increment: step;
        width: 20px;
        line-height: 20px;
        display: block;
        font-size: 10px;
        color: #333;
        background: #bfbfbf;
        border-radius: 20px;
        margin: 0 auto 5px auto; 
    .progressbar li:after {
        content: '';
        width: 100%;
        height: 2px;
        background: #bfbfbf;
        position: absolute;
        left: -50%;
        top: 9px;
        margin-left: 5px;
        z-index: -1; 
    .progressbar li:first-child:after {
        content: none; 
    .progressbar li.stepped {
        color: #900028;
        font-weight: bold; 
    .progressbar li.stepped:before, 
    .progressbar li.stepped:after{
        background: #900028;
        color: white; 

<ul class="progressbar">
      <li class="stepped">Step 1</li>
      <li class="stepped">Step 2</li>
      <li class="stepped">Step 3</li>
      <li>Step 4</li>
      <li>Step 5</li>


Solution courtesy of: mdf


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.