  <style>
 
 .hover-effect-btn {
  position: relative;
  width: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 
}
.hover-effect-btn:hover .overlay {
  display: block;
  background: rgba(0, 0, 0, 0.5); /* Настройка цвета и прозрачности для блока с заголовком при наведении */
}
.title {
  position: absolute;
  width: 100%;
  left: 0;
  top: 25%; /* Отступ сверху */
  font-size: 1.900em; /* Размер текста заголовка */
  text-align: center;
  text-transform: uppercase; /* Заглавные буквы */
  color: white; /* Цвет заголовка */
  z-index: 1;
  transition: top .5s ease;
}
.hover-effect-btn:hover .title {
  top: 10%; /* Отступ сверху при наведении */
}
.button {
  position: absolute;
  width: 100%;
  left:0;
  top: 65%; /* Отступ сверху */
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
}
.button a {
  padding: 15px 40px; /* Отступ */
  text-align: center;
  background: #ff921e; /* Цвет кнопки */
  color: white; /* Цвет текста */
  border: 1px solid white; /* Ширина, стиль и цвет границы */
  z-index: 1; 
}
.hover-effect-btn:hover .button {
  opacity: 1;
}
 
 
 
 </style>