.buttons {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 260px;
  margin-top: -130px;
  margin-left: -250px;
  text-align: center;
}

.set:not(:last-child) {
}

.buttons a{
    text-decoration: none;
}

.btn {
  display: inline-block;
  min-width: 110px;
  padding: 10px 15px 12px;
  font: 700 12px/1 'Open Sans', sans-serif;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 1px rgba(0, 0, 0, 0.1), inset 0 -10px 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.btn.sec {
  color: #777;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  background: #fff;
}

.btn.sec:hover {
  background: #f5f5f5;
}

.btn.pri {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.set.blue .btn.pri {
  background: #59d;
}

.set.green .btn.pri {
  background: #6b6;
}

.set.red .btn.pri {
  background: #d33;
}

.set.black .btn.pri {
  background: #555;
}

.set.blue .btn.pri:hover {
  background: #48c;
}

.set.green .btn.pri:hover {
  background: #5a5;
}

.set.red .btn.pri:hover {
  background: #c22;
}

.set.black .btn.pri:hover {
  background: #444;
}

.btn.sec.ico,
.btn.pri.ico {
  position: relative;
  padding-left: 40px;
  text-align: left;
}

.btn.sec.ico:before,
.btn.pri.ico:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 30px;
  padding: 10px 0 12px;
  font-family: fontawesome;
  text-align: center;
  border-radius: 3px 0 0 3px;
  background: rgba(0, 0, 0, 0.15);
}

.btn.sec.ico:before {
  background: rgba(0, 0, 0, 0.08);
}

.set.blue .btn.sec.ico:before {
  content: "";
}

.set.green .btn.sec.ico:before {
  content: "";
}

.set.red .btn.sec.ico:before {
  content: "";
}

.set.black .btn.sec.ico:before {
  content: "";
}

.set.blue .btn.pri.ico:before {
  content: "";
}

.set.green .btn.pri.ico:before {
  content: "";
}

.set.red .btn.pri.ico:before {
  content: "";
}

.set.black .btn.pri.ico:before {
  content: "";
}