0

Есть блок с ссылкой и тенью вокруг. Как сделать так, чтобы тень также входила в cursor:pointer ? Сейчас ее почему-то не захватывает.

.basket-wrapper {
  cursor: pointer;
}

.in-basket {
  width: 218px;
  max-width: 100%;
  height: 65px;
  box-shadow: 0 5px 50px rgba(75, 134, 255, 0.4);
  background-color: #ffffff;
  color: #071d31;
  font-family: "Circe-ExtraBold";
  font-size: 15px;
  font-weight: 400;
  line-height: 65px;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  margin: 50px auto;
}
<div class="basket-wrapper">
  <div class="in-basket"><a href="/key/?add-to-cart=41" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="41" data-product_sku="" aria-label="Добавить в корзину" rel="nofollow" tabindex="0">В корзину</a></div>
</div>

1 ответ 1

4

UPD

Чтобы ещё и клик срабатывал, можно просто отказаться от блока обёртки, а сделать саму ссылку этим блоком-обёрткой:

a {
  display: block;
  outline: none;
  width: 250px;
  cursor: pointer;
  margin: 50px auto;
  padding: 20px 0;
}

.in-basket {
  width: 218px;
  max-width: 100%;
  height: 65px;
  box-shadow: 0 5px 50px rgba(75, 134, 255, 0.4);
  background-color: #ffffff;
  color: #071d31;
  font-family: "Circe-ExtraBold";
  font-size: 15px;
  font-weight: 400;
  line-height: 65px;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  margin: 0 auto;
}
<a href="/key/?add-to-cart=41" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="41" data-product_sku="" aria-label="Добавить в корзину" rel="nofollow" tabindex="0">
    <div class="in-basket">
      В корзину
    </div>
</a>


Как вариант: задать внешний отступ 50px блоку-обёртке (а не блоку in-basket) + ему же задать внутренние отступы сверху и снизу по размеру тени in-basket:

.basket-wrapper {
width: 250px;
  cursor: pointer;
  margin: 50px auto;
  padding: 20px 0;
}

.in-basket {
  width: 218px;
  max-width: 100%;
  height: 65px;
  box-shadow: 0 5px 50px rgba(75, 134, 255, 0.4);
  background-color: #ffffff;
  color: #071d31;
  font-family: "Circe-ExtraBold";
  font-size: 15px;
  font-weight: 400;
  line-height: 65px;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  margin: 0 auto;
}
<div class="basket-wrapper">
  <div class="in-basket">
    <a href="/key/?add-to-cart=41" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="41" data-product_sku="" aria-label="Добавить в корзину" rel="nofollow" tabindex="0">В корзину</a>
  </div>
</div>

4
  • да, но у вас по ширине cursor pointer до конца распространяется за пределы тени. А если сделать так, чтобы и клик мог на тени срабатывать, а не только cursor pointer
    – Вася
    Commented 29 нояб. 2018 в 8:34
  • @Вася, так это у Вас он растягивается - я думал, так задумано. Поправил. Commented 29 нояб. 2018 в 8:39
  • 1
    @Вася, добавил вариант, чтобы ещё и клик срабатывал Commented 29 нояб. 2018 в 8:52
  • отлично, спасибо
    – Вася
    Commented 29 нояб. 2018 в 8:57

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.