Edit in JSFiddle

<p>
    <div class="google">Google Red</div>
</p>

<p>
    <div class="facebook">Facebook Blue</div>
</p>

<p>
    <div class="amazon">Amazon Yellow</div>
</p>

<p>
    <div class="windows">Windows Phone Red</div>
</p>

<p>
    <div class="nexus">Google Nexus</div>
</p>

.google {
  width: 200px;
  background-color: #D14836;
  border: 1px solid #999;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 5px;
  font-size: 12px;
  font-family: Arial;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  display: block;
  text-align: center;
  cursor: pointer;
}
.facebook {
  width: 200px;
  background-color: #5B74A8;
  border: 1px solid #29447E;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 5px;
  font-size: 12px;
  font-family: Arial;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  display: block;
  text-align: center;
  cursor: pointer;
}
.amazon {
  width: 200px;
  background-color: #FECD57;
  border: 1px solid #FBC43C;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 5px;
  font-size: 12px;
  font-family: Arial;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  display: block;
  text-align: center;
  cursor: pointer;
}
.windows {
  width: 200px;
  background-color: #E51400;
  border: 1px solid #E51400;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 5px;
  font-size: 12px;
  font-family: Arial;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  display: block;
  text-align: center;
  cursor: pointer;
}
.nexus {
  width: 200px;
  background-color: #4CADCB;
  border: 1px solid #02A9D6;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 5px;
  font-size: 12px;
  font-family: Arial;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  display: block;
  text-align: center;
  cursor: pointer;
}