.btn,
.btn:link,
.btn:visited {
  border-radius: .3em;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  margin-bottom: .5em;
  padding: .6em 1em;
  font-size: .85em;
  font-weight: 700;
  text-decoration: none;
  -webkit-transition: color .4s, background-color .4s, border .4s;
          transition: color .4s, background-color .4s, border .4s;
}

.btn:hover {
  color: #7FDBFF;
  border: 1px solid #7FDBFF;
  -webkit-transition: background-color .3s, color .3s, border .3s;
          transition: background-color .3s, color .3s, border .3s;
}

.btn:active {
  color: rgba(0, 196, 223, 1);
  border: 1px solid rgba(0, 196, 223, 1);
  -webkit-transition: background-color .3s, color .3s, border .3s;
          transition: background-color .3s, color .3s, border .3s;
}

.btn--sm,
.btn--sm:link,
.btn--sm:visited {
  border-radius: .3em;
  border-style: none;
  border-width: 1px;
  color: #111;
  display: inline-block;
  margin-bottom: .5em;
  padding: .6em 1em;
  font-size: .750em;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: color .4s, background-color .4s, border .4s;
          transition: color .4s, background-color .4s, border .4s;
}



/*

  Layout utility for responsive buttons

  Code:
  <a href="#" class="btn btn--full">

*/

.btn--full,
.btn--full:link {
  border-radius: .25em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 100%;
}

.btn--black,
.btn--black:link,
.btn--black:visited {
  color: #fff;
  background-color: #000;
}

.btn--black:hover {
  color: #fff;
  background-color: #777;
  border-color: #777;
}

.btn--black:active {
  color: #fff;
  background-color: #999;
  border-color: #999;
}

.btn--black:hover {
  background-color: #444;
}

.btn--black {
  background-color: #000;
}

.btn--gray {
  background-color: #efefef;
}

.btn--gray:link,
.btn--gray:visited {
  background-color: #efefef;
  border-color: #efefef;
  color: #555;
}

.btn--gray:hover {
  background-color: #ddd;
  border-color: #ddd;
  color: #444;
}

.btn--gray:active {
  background-color: #ccc;
  border-color: #ccc;
  color: #444;
}

.btn--gray-border:link,
.btn--gray-border:visited {
  background-color: #fff;
  border-color: #555;
  border-width: 2px;
  color: #555;
}

.btn--gray-border:hover {
  background-color: #fff;
  border-color: #ddd;
  color: #777;
}

.btn--gray-border:active {
  background-color: #ccc;
  border-color: #ccc;
  color: #444;
}

.btn--gray-dark:link,
.btn--gray-dark:visited {
  background-color: #555;
  color: #eee;
}

.btn--gray-dark:hover {
  background-color: #333;
  border-color: #333;
  color: #eee;
}

.btn--gray-dark:active {
  background-color: #777;
  border-color: #777;
  color: #eee;
}

/* Green Buttons */

.btn--green {
  color: #fff;
  background-color: rgba(66, 192, 160, 1);
}

.btn--green-border {
  background-color: #fff;
  color: rgba(66, 192, 160, 1);
  border-color: rgba(66, 192, 160, .5);
  border-width: 2px;
  border-style: solid;
}

.btn--green-border:link,
.btn--green-border:visited {
  background-color: #fff;
  border-color: #rgba(66, 192, 160, 1);
  border-width: 2px;
  color: rgba(66, 192, 160, 1);
}

.btn--green-border:hover {
  background-color: rgba(66, 192, 160, .2);
  border-color: rgba(66, 192, 160, .5);
  color: rgba(66, 192, 160, 1);
}

.btn--green-border:active {
  background-color: rgba(66, 192, 160, .8);
  border-color: rgba(66, 192, 160, 1);
  color: rgba(66, 192, 160, 1);
}

.btn--green:link,
.btn--green:visited {
  color: #fff;
  background-color: rgba(66, 192, 160, 1);
}

.btn--green:hover {
  color: #fff;
  background-color: rgba(66, 192, 160, .8);
  border-color: rgba(66, 192, 160, .8);
}

.btn--green:active {
  color: #fff;
  background-color: rgba(66, 192, 160, .8);
  border-color: rgba(66, 192, 160, .8);
}

/* Yellow Buttons */

.btn--yellow {
  color: #333;
  background-color: rgba(255, 231, 89, 1);
}

.btn--yellow-border {
  background-color: #fff;
  color: rgba(255, 231, 89, 1);
  border-color: rgba(255, 231, 89, .5);
  border-width: 2px;
  border-style: solid;
}

.btn--yellow-border:link,
.btn--yellow-border:visited {
  background-color: #fff;
  border-color: #rgba(255, 231, 89, 1);
  border-width: 2px;
  color: rgba(255, 231, 89, 1);
}

.btn--yellow-border:hover {
  background-color: rgba(255, 231, 89, .2);
  border-color: rgba(255, 231, 89, .5);
  color: rgba(255, 231, 89, 1);
}

.btn--yellow-border:active {
  background-color: rgba(255, 231, 89, .8);
  border-color: rgba(255, 231, 89, 1);
  color: rgba(255, 231, 89, 1);
}

.btn--yellow:link,
.btn--yellow:visited {
  color: #fff;
  background-color: rgba(255, 231, 89, 1);
}

.btn--yellow:hover {
  color: #fff;
  background-color: rgba(255, 231, 89, .8);
  border-color: rgba(255, 231, 89, .8);
}

.btn--yellow:active {
  color: #fff;
  background-color: rgba(255, 231, 89, .8);
  border-color: rgba(255, 231, 89, .8);
}

/* Red Buttons */

.btn--red {
  color: #fff;
  background-color: rgba(250, 128, 114, 1);
}

.btn--red:link,
.btn--red:visited {
  color: #fff;
  background-color: rgba(250, 128, 114, 1);
}

.btn--red:hover {
  color: #fff;
  background-color: rgba(250, 128, 114, .8);
  border-color: rgba(250, 128, 114, .8);
}

.btn--red:active {
  color: #fff;
  background-color: rgba(250, 128, 114, .8);
  border-color: rgba(250, 128, 114, .8);
}

/* Blue Buttons */

.btn--teal {
  color: #fff;
  background-color: rgba(0, 196, 223, 1);
}

.btn--teal:link,
.btn--teal:visited {
  color: #fff;
  background-color: rgba(0, 196, 223, 1);
}

.btn--teal:hover {
  color: #fff;
  background-color: rgba(0, 196, 223, .8);
  border-color: rgba(0, 196, 223, .8);
}

.btn--teal:active {
  color: #fff;
  background-color: rgba(0, 196, 223, .8);
  border-color: rgba(0, 196, 223, .8);
}

/* Purple Buttons */

.btn--purple {
  color: #fff;
  background-color: rgba(100, 89, 125, 1);
}

.btn--purple:link,
.btn--purple:visited {
  color: #fff;
  background-color: rgba(100, 89, 125, 1);
}

.btn--purple:hover {
  color: #fff;
  background-color: rgba(100, 89, 125, .8);
  border-color: rgba(100, 89, 125, .8);
}

.btn--purple:active {
  color: #fff;
  background-color: rgba(100, 89, 125, .8);
  border-color: rgba(100, 89, 125, .8);
}

/* Keep it mobile-first and responsive */

@media screen and (min-width: 32em) {
  .btn--full {
    max-width: 16em;
  }
}