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
    – Вася
    29 ноя 2018 в 8:34
  • @Вася, так это у Вас он растягивается - я думал, так задумано. Поправил. 29 ноя 2018 в 8:39
  • 1
    @Вася, добавил вариант, чтобы ещё и клик срабатывал 29 ноя 2018 в 8:52
  • отлично, спасибо
    – Вася
    29 ноя 2018 в 8:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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