Как изменить ширину box-shadow css - PullRequest
Новая
       48

Как изменить ширину box-shadow css

0 голосов
/ 31 марта 2020

У меня есть кнопка, у которой при наведении курсора появляется тень от окна.

Я не знаю , как сделать тень от рамки меньше по ширине.

Я прикреплю текущее состояние моей кнопки:

enter image description here

Вот соответствующий код: 

.paddingButtons {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.paddingButtons:hover {
  -webkit-box-shadow: 0px 2px 3px 15px rgba(142, 84, 197, 0.6), inset 0 0 30px rgba(142, 84, 197, 1);
  -moz-box-shadow: 0px 2px 3px 15px rgba(142, 84, 197, 0.6), inset 0 0 30px rgba(142, 84, 197, 1);
  box-shadow: 0px 2px 3px 15px rgba(142, 84, 197, 0.6), inset 0 0 30px rgba(142, 84, 197, 1);
}

.wrapper {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
  justify-items: center;
  text-align: center;
}

.full-row {
  grid-column: 1/4;
  text-align: center;
}
<div class="wrapper">
  <div class="full-row margin-small">
    <a href="#" class="paddingButtons">
      <img src="https://i.imgur.com/Ilwpsig.png" class="default" width=80% />
    </a>
  </div>
</div>

1 Ответ

1 голос
/ 31 марта 2020

Настройте свой код, как показано ниже. 

.paddingButtons {
  display:inline-block; /* to cover all the image */
}
img {
  display:block; /* to avoid white space at the bottom */
}

.paddingButtons:hover {
  box-shadow:inset 0 0 30px rgba(142, 84, 197, 1); /* only inset is needed */
}

.wrapper {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
  justify-items: center;
  text-align: center;
}

.full-row {
  grid-column: 1/4;
  text-align: center;
}
<div class="wrapper">
  <div class="full-row margin-small">
    <a href="#" class="paddingButtons">
      <img src="https://i.imgur.com/Ilwpsig.png" class="default" > <!-- removed width=80% -->
    </a>
  </div>
</div>
...