<div class="button sm">
  <input type="checkbox" class="check">
  <i class="fa fa-lightbulb-o" aria-hidden="true"></i>
</div>
<div class="button sm">
  <input type="checkbox" class="check">
  <i class="fa fa-bell-o" aria-hidden="true"></i>
</div>
<div class="button sm">
  <input type="checkbox" class="check">
  <i class="fa fa-cogs" aria-hidden="true"></i>
</div>
<div class="button md">
  Success!
</div>
<div class="button lg">
  Click me
</div>

.button {
  position: relative;
  color: #555;
  background:linear-gradient(50deg, #fff, #999);
  border-radius: 80px;
  text-align: center;
  margin: 10px;
  font-size: 30px;
  box-shadow: 
    .5px -.5px 1px 1px #fff,
    -1px 1px 1px 1px #999,
    -5px 8px 15px 1px #999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  user-select: none;
}

.button.sm {
  width: 80px;
  height: 80px;
}

.button.md {
  width: 240px;
  height: 80px;
}

.button.lg {
  width: 400px;
  height: 80px;
}

.button:hover {
  cursor: pointer;
}

.button:active {
  font-size: 26px;
  box-shadow: 
    .5px -.5px 1px .5px #fff,
    -1px 1px 1px .5px #999,
    -1px 4px 10px 1px #999;
}

.check {
  position: absolute;
  left: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  opacity: 0;
  cursor: pointer;
}

.check:checked ~ i {
  color: #1eabbe;
}

body {
  width: 100%;
  height: 100vh;
  background:linear-gradient(30deg, #fff, #999);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  flex-wrap: wrap;
}