@charset "utf-8";
<style type="text/css">
@font-face {
    font-family: Montserrat-Regular; /* Гарнитура шрифта */
    src: url(fonts/Montserrat-Regular.otf); /* Путь к файлу со шрифтом */
    src: url(fonts/Montserrat-Regular.otf); /* Путь к файлу со шрифтом */
   }
   h1 {
    font-family: Montserrat-Regular, 'Comic Sans MS', bold;
   }
   body{
  margin: 0;
  padding: 0;
}

/*кнопка probeat*/
.btn1{
	width: 600px;
	position: relative;
	display: block;
	color: white;
	font-size: 28px;
	font-family: Montserrat Regular;
	text-decoration: none;
	margin: 10px 0;
	border: 2px solid #fa4d60;
	padding: 14px 60px;
	text-transform: uppercase;
	overflow: hidden;
	transition: 1s all ease;
	font-weight: bold;
	font-style: normal;
}
.btn1::before{
  background: #fa4d60;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  transition: all 0.6s ease;
}

.btn_pro::before{
  width: 0%;
  height: 100%;
/*  transform: translate(-50%,-50%) rotate(-45deg);*/
}
.btn_pro:hover::before{
	width: 100%;
}


/*кнопка cafe*/
.btn2{
	width: 600px;
	position: relative;
	display: block;
	color: white;
	font-size: 28px;
	font-family: Montserrat Regular;
	text-decoration: none;
	margin: 10px 0;
	border: 2px solid #b570a2;
	padding: 14px 60px;
	text-transform: uppercase;
	overflow: hidden;
	transition: 1s all ease;
	font-weight: bold;
	font-style: normal;
}
.btn2::before{
  background: #b570a2;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  transition: all 0.6s ease;
}

.btn_cafe::before{
  width: 0%;
  height: 100%;
/*  transform: translate(-50%,-50%) rotate(-45deg); */
}
.btn_cafe:hover::before{
	width: 100%;
}

/*кнопка idea*/
.btn3{
	width: 600px;
	position: relative;
	display: block;
	color: white;
	font-size: 28px;
	font-family: Montserrat Regular;
	text-decoration: none;
	margin: 10px 0;
	border: 2px solid #64bcee;
	padding: 14px 60px;
	text-transform: uppercase;
	overflow: hidden;
	transition: 1s all ease;
	font-weight: bold;
}
.btn3::before{
  background: #64bcee;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  transition: all 0.6s ease;
}

.btn_idea::before{
  width: 0%;
  height: 100%;
/*  transform: translate(-50%,-50%) rotate(-45deg);*/
}
.btn_idea:hover::before{
	width: 100%;
}

/*кнопка extra*/
.btn4{
	width: 600px;
	position: relative;
	display: block;
	color: white;
	font-size: 28px;
	font-family: Montserrat Regular;
	text-decoration: none;
	margin: 10px 0;
	border: 2px solid #fa824a;
	padding: 14px 60px;
	text-transform: uppercase;
	overflow: hidden;
	transition: 1s all ease;
	font-weight: bold;
}
.btn4::before{
  background: #fa824a;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  transition: all 0.6s ease;
}

.btn_extra::before{
  width: 0%;
  height: 100%;
/*  transform: translate(-50%,-50%) rotate(-45deg);*/
}
.btn_extra:hover::before{
	width: 100%;
}   

/*кнопка btm*/
.btn5{
	width: 600px;
	position: relative;
	display: block;
	color: white;
	font-size: 28px;
	font-family: Montserrat Regular;
	text-decoration: none;
	margin: 10px 0;
	border: 2px solid #e32cbb;
	padding: 14px 60px;
	text-transform: uppercase;
	overflow: hidden;
	transition: 1s all ease;
	font-weight: bold;
}
.btn5::before{
  background: #e32cbb;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  transition: all 0.6s ease;
}

.btn_btm::before{
  width: 0%;
  height: 100%;
/*  transform: translate(-50%,-50%) rotate(-45deg); */
}
.btn_btm:hover::before{
  width: 100%;
}   
   
</style>