<div class="body">
  <div class="outline circle center-text">
    Go!
  </div>
  <div class="outline circle close-side center-text">
    Go!
  </div>
  
  <div class="outline circle close-corner center-text">
    Go!
  </div>
  
  <div class="outline circle far-side center-text">
    Go!
  </div>
  
  <div class="outline circle far-corner center-text">
    Go!
  </div>
  
</div>

.body {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.outline {
  background: rgb(75, 75, 200);
  background: -webkit-radial-gradient(
    50% 50%,
    circle,
    rgb(75, 75, 200),
    rgb(0, 0, 75)
  );
  background: -moz-radial-gradient(
    50% 50%,
    circle,
    rgb(75, 75, 200),
    rgb(0, 0, 75)
  );
  background: -ms-radial-gradient(
    50% 50%,
    circle,
    rgb(75, 75, 200),
    rgb(0, 0, 75)
  );
  background: -o-radial-gradient(
    50% 50%,
    circle,
    rgb(75, 75, 200),
    rgb(0, 0, 75)
  );
  border: 1px solid #000;
  width: 100px;
  height: 100px;
}

.circle {
  border-radius: 50%;
}

.center-text {
  color: #000;
  font: bold 16px/6em "Helvetica Neue", sans-serif;
  text-align: center;
}

.mb {
  margin-bottom: 8px;
}

.close-side {
  background: radial-gradient(
    closest-side circle at 35% 25%,
    rgb(75, 75, 200),
    rgb(0, 0, 75)
  );
}

.close-corner {
  background: radial-gradient(
    closest-corner ellipse at 35% 25%,
    rgb(75, 75, 200),
    rgb(0, 0, 75)
  );
}

.far-side {
  background: radial-gradient(
    farthest-side circle at 35% 25%,
    rgb(75, 75, 200),
    rgb(0, 0, 75)
  );
}

.far-corner {
  background: radial-gradient(
    farthest-corner ellipse at 35% 25%,
    rgb(75, 75, 200),
    rgb(0, 0, 75)
  );
}