.set_8_button {

  display: inline-block;

  font-weight: 400;

  padding: 0px 25px;

  line-height:45px;

  text-decoration: none;

  margin-right: 2em;

  cursor:pointer;

  text-align: center;

  transition: background 300ms;

}

.set_8_button.outline {

  color: #333;

  overflow: hidden;

  position: relative;

}

.set_8_button.outline:before, .set_8_button.outline:after, .set_8_button.outline .lines:before, .set_8_button.outline .lines:after {

  background-color: #fff;

  content: "";

  height: 2px;

  left: 0;

  position: absolute;

  top: 0;

  transition: transform 300ms;

  width: 100%;

}

.set_8_button.outline:before {

  bottom: 0;

  top: auto;

}

.set_8_button.outline .lines {

  display: block;

  height: 100%;

  left: 0;

  position: absolute;

  top: 0;

  width: 100%;

  z-index: 0;

}

.set_8_button.outline .lines:before, .set_8_button.outline .lines:after {

  height: 100%;

  width: 2px;

}

.set_8_button.outline .lines:after {

  left: auto;

  right: 0;

}

.set_8_button:hover:before {

  transform: translateX(-100%);

}

.set_8_button:hover:after {

  transform: translateX(100%);

}

.set_8_button:hover .lines:before {

  transform: translateY(-100%);

}

.set_8_button:hover .lines:after {

  transform: translateY(100%);

}





/*** button 2 ***/



.set_8_button2 {

  display: inline-block;

  font-weight: 400;

  padding: 0px 25px;

  line-height:45px;

  text-decoration: none;

  margin-right: 2em;

  cursor:pointer;

  text-align: center;

  transition: background 300ms;

}

.set_8_button2.outline {

  color: #333;

  overflow: hidden;

  position: relative;

}

.set_8_button2.outline:before, .set_8_button2.outline:after, .set_8_button2.outline .lines:before, .set_8_button2.outline .lines:after {

  background-color: #f8c013;

  content: "";

  height: 2px;

  left: 0;

  position: absolute;

  top: 0;

  transition: transform 300ms;

  width: 100%;

}

.set_8_button2.outline:before {

  bottom: 0;

  top: auto;

}

.set_8_button2.outline .lines {

  display: block;

  height: 100%;

  left: 0;

  position: absolute;

  top: 0;

  width: 100%;

  z-index: 0;

}

.set_8_button2.outline .lines:before, .set_8_button2.outline .lines:after {

  height: 100%;

  width: 2px;

}

.set_8_button2.outline .lines:after {

  left: auto;

  right: 0;

}

.set_8_button2:hover:before {

  transform: translateX(-100%);

}

.set_8_button2:hover:after {

  transform: translateX(100%);

}

.set_8_button2:hover .lines:before {

  transform: translateY(-100%);

}

.set_8_button2:hover .lines:after {

  transform: translateY(100%);

}





/*** button 3 ***/



.set_8_button3 {

  display: inline-block;

  font-weight: 400;

  padding: 0px 25px;

  line-height:45px;

  text-decoration: none;

  margin-right: 2em;

  cursor:pointer;

  text-align: center;

  transition: background 300ms;

}

.set_8_button3.outline {

  color: #333;

  overflow: hidden;

  position: relative;

}

.set_8_button3.outline:before, .set_8_button3.outline:after, .set_8_button3.outline .lines:before, .set_8_button3.outline .lines:after {

  background-color: #dd483f;

  content: "";

  height: 2px;

  left: 0;

  position: absolute;

  top: 0;

  transition: transform 300ms;

  width: 100%;

}

.set_8_button3.outline:before {

  bottom: 0;

  top: auto;

}

.set_8_button3.outline .lines {

  display: block;

  height: 100%;

  left: 0;

  position: absolute;

  top: 0;

  width: 100%;

  z-index: 0;

}

.set_8_button3.outline .lines:before, .set_8_button3.outline .lines:after {

  height: 100%;

  width: 2px;

}

.set_8_button3.outline .lines:after {

  left: auto;

  right: 0;

}

.set_8_button3:hover:before {

  transform: translateX(-100%);

}

.set_8_button3:hover:after {

  transform: translateX(100%);

}

.set_8_button3:hover .lines:before {

  transform: translateY(-100%);

}

.set_8_button3:hover .lines:after {

  transform: translateY(100%);

}





/*** button 4 ***/



.set_8_button4 {

  display: inline-block;

  font-weight: 400;

  padding: 0px 25px;

  line-height:45px;

  text-decoration: none;

  margin-right: 2em;

  cursor:pointer;

  text-align: center;

  transition: background 300ms;

}

.set_8_button4.outline {

  color: #333;

  overflow: hidden;

  position: relative;

}

.set_8_button4.outline:before, .set_8_button4.outline:after, .set_8_button4.outline .lines:before, .set_8_button4.outline .lines:after {

  background-color: #56c5ff;

  content: "";

  height: 2px;

  left: 0;

  position: absolute;

  top: 0;

  transition: transform 300ms;

  width: 100%;

}

.set_8_button4.outline:before {

  bottom: 0;

  top: auto;

}

.set_8_button4.outline .lines {

  display: block;

  height: 100%;

  left: 0;

  position: absolute;

  top: 0;

  width: 100%;

  z-index: 0;

}

.set_8_button4.outline .lines:before, .set_8_button4.outline .lines:after {

  height: 100%;

  width: 2px;

}

.set_8_button4.outline .lines:after {

  left: auto;

  right: 0;

}

.set_8_button4:hover:before {

  transform: translateX(-100%);

}

.set_8_button4:hover:after {

  transform: translateX(100%);

}

.set_8_button4:hover .lines:before {

  transform: translateY(-100%);

}

.set_8_button4:hover .lines:after {

  transform: translateY(100%);

}