Search code examples
cssbox-shadow

How to change the width of box-shadow css

I have a button that has a box-shadow on hover.

I dont know how to make the box-shadow smaller in width.

I will attach the current status of my button:

enter image description here

Here is the relevant code:

.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>

Solution

  • Adjust your code like below.

    .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>