<div class="circle text-center">Do you like flat colors?</div>
<div class="col-md-12 col-xs-12 btn-top">
  <div class="col-md-4 col-xs-4 text-left"><button class="btn btn-default btn-sm" onclick="color('body');"><i class="glyphicon glyphicon-refresh"></i> Refresh Background</button>
</div>
  <div class="col-md-4 col-xs-4 text-center"><button class="btn btn-default btn-sm" onclick="color('.circle','color');"><i class="glyphicon glyphicon-refresh"></i> Refresh Text Color</button></div>
  <div class="col-md-4 col-xs-4 text-right"><button class="btn btn-default btn-sm" onclick="color('.circle');"><i class="glyphicon glyphicon-refresh"></i> Refresh Circle</button></div>


</div>


body,.circle{transition:background-color .5s,color .5s;}

.btn-top{
  position:absolute;
  top:10px;
}
.circle {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  line-height:150px;
  font-size:11px;
  top:50%;
  left:50%;
  position:absolute;
  margin:-75px 0 0 -75px;
}
function color(element, attribute) {
  var colors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#ecf0f1", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"];
  var getRandom = colors[Math.floor(Math.random() * colors.length)];
  if (attribute == 'color') {
    $(element).css('color', getRandom);
  } else {
    $(element).css('background-color', getRandom);
  }
}

color('body', 'background');
color('.circle', 'background');
color('.circle', 'color');

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js