CSS Colored Circle Indicators

by Jason Butz

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="ax" class="outer-circle img-circle circle-red">
    <div class="inner-circle img-circle">
        <span>AX</span>
    </div>
</div>

<button id="go-red">
RED
</button>

<button id="go-green">
GREEN
</button>

CSS

body {
    background-color: black;
}

.outer-circle {
    width: 100px;
    height: 100px;
    text-align: center;
    position: relative;
}

.inner-circle {
    background-color: black;
    width: 75px;
    height: 75px;
    margin: 25px;
    margin-right: auto;
    margin-left: auto;
    top: 12.5px; /* (outer circle height - inner circle height) / 2 */
    position: relative;
}

.outer-circle span {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 75px; /* This is the height of the inner circle */
    color: white;
}

.circle-red {
    background-color: red;
}
.circle-green {
    background-color: green;
}

JavaScript

$('#go-red').click(function(){
	$('#ax').addClass('circle-red').removeClass('circle-green');
});

$('#go-green').click(function(){
	$('#ax').addClass('circle-green').removeClass('circle-red');
});