Анимация кнопки "капля" при наведении разлазится на весь блок. Как ее собрать?

Question

Подскажите пожалуйста, как в моем блоке можно усовершенствовать эффект для кнопки при наведении, но чтобы при этом эффект не расползался на весь блок? У меня он расползается( Сам эффект с кнопкой и блоком прилагаю)

/*-------------------B5 баннер-------------*/


.block-b5 {
  width: 1170px;
  height: 160px;
  position: relative;
  overflow: hidden;
}

.photo-block {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.block-b5:after {
  content: "";
  background: #3a3310;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  opacity: 0.37;
}

.btn-banner {
    font-size: 15px;
    background: white;
    border-radius: 3px;
    display: block;
    width: 144px;
    padding: 11px 0;
    text-align: center;
}

.wrapper-btn-banner {
    position: absolute;
    z-index: 10;
    top: 50%;
  left: 85%;
  transform: translate(-50%, -50%);
}

/*-----------конец B5 баннер---------------------*/


/*-----------заголовок---------------------*/

.h2-block-banner {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 24px;
  color: white;
  z-index: 10;
  margin: 0;
  padding: 0;
}

/*-----------конец заголовок---------------------*/


/*-----------кнопка---------------------*/

.wrapper-btn-banner {
    position: absolute;
    z-index: 10;
    top: 50%;
  left: 85%;
  transform: translate(-50%, -50%);
  
}

.btn {
  width: 240px;
  height: 50px;
  text-decoration: none;
  padding: 15px 30px;
  color: white;
  font-weight: bold;
  letter-spacing: 1px;
  position: relative;
  font-size: 30pt;
  font-family: "Poiret One", sans-serif;
}

.btn-1 {
  border: 3px solid white;
}
.btn-1:after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: white;
  transition: all 300ms;
}

.btn-1:hover {
  color: #00BBD3;
  transition: all .2s ease;
}
.btn-1:hover:after {
  width: 350px;
  height: 350px;
  top: 50%;
  left: 50%;
}

/*-----------конец кнопка---------------------*/

<div class="block-b5">
                <h2 class="h2-block-banner">
                    Как происходит обслуживание?
                </h2>
                <img class="photo-block" src="https://elitestudent.ru/images/8804_ho_00_p_2048x1536.jpg" alt="">
                <div class="wrapper-btn-banner">
            <a href="#" class="btn btn-1">Узнать</a>
            </div>
</div>

Answer 1

Чтобы можно было задавать размеры и правильно позиционировать псевдоэлементы, нужно ссылку (тег <a>) сделать блочным элементом, с помощью свойства display со значением отличным от inline (значение по умолчанию).

Также нужно добавить для кнопки overflow: hidden, чтобы обрезать контент выходящий за определённые границы.

/*-------------------B5 баннер-------------*/

.block-b5 {
  width: 1170px;
  height: 160px;
  position: relative;
  overflow: hidden;
}

.photo-block {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.block-b5::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  height: 100%;
  width: 100%;
  background: #3a3310;
  opacity: 0.37;
}

.btn-banner {
  display: block;
  width: 144px;
  padding: 11px 0;
  border-radius: 3px;
  font-size: 15px;
  text-align: center;
  background: white;
}

.wrapper-btn-banner {
  position: absolute;
  top: 50%;
  left: 85%;
  z-index: 10;
  transform: translate(-50%, -50%);
}


/*-----------конец B5 баннер---------------------*/


/*-----------заголовок---------------------*/

.h2-block-banner {
  position: absolute;
  top: 50%;
  left: 25%;
  z-index: 10;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  font-size: 24px;
  white-space: nowrap;
  color: white;
}


/*-----------конец заголовок---------------------*/


/*-----------кнопка---------------------*/

.wrapper-btn-banner {
  position: absolute;
  top: 50%;
  left: 85%;
  z-index: 10;
  transform: translate(-50%, -50%);
}

.btn {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 240px;
  padding: 15px 30px;
  overflow: hidden;
  font: bold 30pt "Poiret One", sans-serif;
  letter-spacing: 1px;
  text-decoration: none;
  text-align: center;
  color: white;
}

.btn-1 {
  border: 3px solid white;
}

.btn-1::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  height: 0;
  width: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: white;
  transition: all 300ms;
}

.btn-1:hover {
  color: #00BBD3;
  transition: all .2s ease;
}

.btn-1:hover::after {
  top: 50%;
  left: 50%;
  height: 350px;
  width: 350px;
}


/*-----------конец кнопка---------------------*/

<div class="block-b5">
  <h2 class="h2-block-banner">
    Как происходит обслуживание?
  </h2>
  <img class="photo-block" src="https://elitestudent.ru/images/8804_ho_00_p_2048x1536.jpg" alt="">
  <div class="wrapper-btn-banner">
    <a href="#" class="btn btn-1">Узнать</a>
  </div>
</div>

Но, я бы обошёлся совсем без псевдоэлементов - CSS3 же:

a {
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px; width: 200px;
  border: 3px solid #fff;
  overflow: hidden;
  font: bold 22px/1em sans-serif;
  text-decoration: none;
  color: #fff;
  background-image: radial-gradient(circle, #fff 49%, transparent 51%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0 0;
  filter: drop-shadow(1px 2px 3px #0008);
  transition: 0.25s ease;
}

a:hover {
  color: #00BBD3;
  background-size: 300px 300px;
}

<a href="http://youtube.com" target="_blank">Узнать</a>

Answer 2

Предлагаю сделать немного иначе. Не использовать лишнее количество ненужных элементов в коде. Только ссылка a. К тому же, если нужно еще это:

А как можно делать, чтобы все поле кнопки было кликабельным? Если обернуть тегом А то слетит же? - из комментария

Завернуть всю стилизацию в ссылку. В этом есть два плюса. 1. Полезно для ПС, если это переход внутри сайта. 2. Не будет блокирована сторонними блокировщиками, если это рекламный баннер, ведущий на другой сайт. Пример:

.dobr {
  display: block; position: relative; text-decoration: none;
  width: 100%; max-width: calc(1170px - 30%); height: 160px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url(https://elitestudent.ru/images/8804_ho_00_p_2048x1536.jpg) center center; background-size: cover;
  color: white; font-size: 24px; white-space: nowrap; line-height: 160px; padding: 0 15%;
}

.dobr>span, .dobr>span::after {
  display: block; position: absolute; overflow: hidden;
  top: 52px; right: 55px; width: 240px; height: 50px;
  border: 3px solid white; text-align: center; color: white; line-height: 50px;
}

.dobr>span::before {
  content: ""; display: block; position: absolute;
  top: calc(50% - 5px); left: calc(50% - 5px);
  width: 10px; height: 10px; border-radius: 100%;
  background: white; opacity: 0;
  transform: scale(1); transition: transform 0s;
}
.dobr:hover>span::before {
  opacity: 1; transform: scale(100); transition: transform 4s;
}

.dobr>span::after {
  content: "Узнать"; color: lightseagreen; top: -3px; left: -3px; opacity: 0;
}
.dobr:hover>span::after {opacity: 1; transition: opacity 1s;}

<a href="https://ru.stackoverflow.com/" class="dobr">Как происходит обслуживание? <span>Узнать</span></a>

БЛОГ НА HUSL

Анимация кнопки "капля" при наведении разлазится на весь блок. Как ее собрать?

Ответы (2 шт):