/* button 1*/



.set_5_button {

  background: #666;

  color: white;

  overflow: hidden;

  z-index: 1;

  float: left;

  font-weight: 400;

  line-height: 45px;

  margin-right: 2.5em;

  cursor:pointer;

  overflow: hidden;

  padding: 0 25px;

  position: relative;

  text-align: center;

  width: auto;

}

.set_5_button:after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 500%;

  height: 1000%;

  background: #838383;

  z-index: -1;

  transform-origin: 0% 0%;

  transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg);

  /transform: translateY(10%) translateX(16%) rotate(-45deg);

  transition: transform .3s;

}

.set_5_button:hover::after {

  transform: translateY(10%) translateX(-25px) rotate(-45deg);

}



/* button 2*/



.set_5_button2 {

  background: #e1b700;

  color:#2e2302;

  overflow: hidden;

  z-index: 1;

  float: left;

  font-weight: 400;

  line-height: 45px;

  margin-right: 2.5em;

  cursor:pointer;

  overflow: hidden;

  padding: 0 25px;

  position: relative;

  text-align: center;

  width: auto;

}

.set_5_button2:after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 500%;

  height: 1000%;

  background: #ffd311;

  z-index: -1;

  transform-origin: 0% 0%;

  transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg);

  /transform: translateY(10%) translateX(16%) rotate(-45deg);

  transition: transform .3s;

}

.set_5_button2:hover::after {

  transform: translateY(10%) translateX(-25px) rotate(-45deg);

}  



/* button 3*/



.set_5_button3 {

  background: #f2625a;

  color: white;

  overflow: hidden;

  z-index: 1;

  float: left;

  font-weight: 400;

  line-height: 45px;

  margin-right: 2.5em;

  cursor:pointer;

  overflow: hidden;

  padding: 0 25px;

  position: relative;

  text-align: center;

  width: auto;

}

.set_5_button3:after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 500%;

  height: 1000%;

  background: #dd483f;

  z-index: -1;

  transform-origin: 0% 0%;

  transform: translateX(calc(20% - 30px)) translateY(10%) rotate(-45deg);

  /transform: translateY(10%) translateX(16%) rotate(-45deg);

  transition: transform .3s;

}

.set_5_button3:hover::after {

  transform: translateY(10%) translateX(-30px) rotate(-45deg);

}  



/* button 4*/



.set_5_button4 {

  background: #b9ccd2 ;

  color: #252b2d;

  overflow: hidden;

  z-index: 1;

  float: left;

  font-weight: 400;

  line-height: 45px;

  margin-right: 2.5em;

  cursor:pointer;

  overflow: hidden;

  padding: 0 25px;

  position: relative;

  text-align: center;

  width: auto;

}

.set_5_button4:after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 500%;

  height: 1000%;

  background: #cce0e7;

  z-index: -1;

  transform-origin: 0% 0%;

  transform: translateX(calc(20% - 30px)) translateY(10%) rotate(-45deg);

  /transform: translateY(10%) translateX(16%) rotate(-45deg);

  transition: transform .3s;

}

.set_5_button4:hover::after {

  transform: translateY(10%) translateX(-30px) rotate(-45deg);

}