Тень накладывается на кнопку, а не на картинку внутри

Question

div class="main__show-video">
            <button class="main__show-video_button">
                <img src="./img/play.png" alt="">
            </button>
        </div>

&_button {
            img {
                width:80px;
                &:hover {
                    opacity: 80%;
                    cursor:pointer;
                }
                -webkit-box-shadow: 2px 2px 7px 7px #171e87; 
                box-shadow: 2px 2px 7px 7px #171e87;
            }
            background: none;
            border:none;
            &:focus {
                outline:none;
            }
            
        }

У меня есть кнопка внутри которой, находится картинка. Я хочу сделать тень при наведении для картинки, но она накладывается на кнопку. Как исправить?

Answer 1

Как уже заметили в комментариях, правильнее будет сделать данную кнопку на CSS:

.main__show-video_button {
  position: relative;
  width: 134px; height: 134px;
  padding: 0; border-radius: 50%;
  border: none; outline: none;
  background-color: #383887;
  box-shadow: inset 0 0 1px 3px #000, 2px 2px 7px 7px #171e87;
  cursor: pointer;
}
.main__show-video_button:hover { opacity: 80%; }

.main__show-video_button::before,
.main__show-video_button::after {
  content: "";
  position: absolute; left: 55%;
  height: 23.9%; width: 43.3%;
  background-image: linear-gradient(to right, black 4px, transparent 5px), linear-gradient( to left bottom, transparent 50%, black calc(50% + 1px), black calc(50% + 4px), white calc(50% + 5px));
  background-position: 0 4px, 0 0;
  background-repeat: no-repeat;
}
.main__show-video_button::before { bottom: 50%; transform: translatex(-50%); }
.main__show-video_button::after { top: 50%; transform: translatex(-50%) scaley(-1); }

<div class="main__show-video">
  <button class="main__show-video_button"></button>
</div>

Или даже на SVG:

.main__show-video_button {
  position: relative; z-index: 0;
  height: 130px; width: 130px;
  padding: 0; border-radius: 50%;
  border: none; outline: none;
  overflow: hidden; background: none;
  box-shadow: 2px 2px 7px 7px #171e87;
  cursor: pointer;
}
.main__show-video_button:hover { opacity: 80%; }

<div class="main__show-video">
  <button class="main__show-video_button">
    <svg viewBox="0 0 100 100">
      <circle cx="50%" cy="50%" r="49px" fill="#383887" stroke="#000" stroke-width="4"/>
      <polygon points="35,30 75,50 35,70" fill="#fff" stroke="#000" stroke-width="3"/>
    </svg>
  </button>
</div>

Но, если такая необходимость в использовании картинки, то можно и так:

.main__show-video_button {
  position: relative; z-index: 0;
  height: 130px; width: 130px;
  padding: 0; border-radius: 50%;
  border: none; outline: none;
  overflow: hidden; background: none;
  box-shadow: inset 0 0 1px 4px #000, 2px 2px 7px 7px #171e87;
  cursor: pointer;
}
.main__show-video_button:hover { opacity: 80%; }

.main__show-video_button img {
  position: relative; z-index: -1;
  top: -43px; left: -121px;
}

<div class="main__show-video">
  <button class="main__show-video_button">
    <img src="https://i.stack.imgur.com/HGk1X.png" alt="">
  </button>
</div>

Answer 2

Под шумок тогда еще подкину пару вариантов, близких к соседнему, но индивидуальных:

button {
  outline:none; cursor:pointer; transform: translate(20px, 20px); width: 120px; height: 120px;
  border-radius: 100px; background: #383887; border: 4px solid black;
  transition: box-shadow 0.2s;
}

button::before {
  content: ""; position: absolute; transform: translate(calc(50% - 57px), calc(50% - 57px));
  border: 30px solid transparent; border-left: 51px solid black;
}

button::after {
  content: ""; position: absolute; transform: translate(calc(50% - 45px), calc(50% - 46px));
  border: 24px solid transparent; border-left: 40px solid white;
}

button:hover {box-shadow: 0px 0px 10px 10px #383887;}

<button></button>

и:

button {
  outline: none; cursor: pointer; transform: translate(20px, 20px);
  width: 120px; height: 120px; border-radius: 100px;
  background: #383887; border: 4px solid black;
  transition: box-shadow 0.8s;
}

button::before {
  content: ""; position: absolute; transform: translate(calc(50% - 45px), calc(50% - 50px));
  width: 52px; height: 52px; background: black;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform 0.3s;
}

button::after {
  content: ""; position: absolute; transform: translate(calc(50% - 38px), calc(50% - 42px));
  width: 44px; height: 44px; background: white;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform 0.3s;
}

button:hover {box-shadow: 0px 0px 10px 10px #383887;}
button:hover::before {transform: translate(calc(50% - 43px), calc(50% - 50px)) scale(1.2);}
button:hover::after {transform: translate(calc(50% - 36px), calc(50% - 42px)) scale(1.2);}

<button></button>

Answer 3

SVG filter

Svg основу кода заимствовал у @UModeL - отсюда

В качестве тени при наведении используются фильтры svg

.main__show-video {
width:15vw;
height:auto;
}
polygon {
fill:#fff;
stroke:#4A4A4A;
stroke-width:3;

}
circle:hover {filter:url(#dropshadow);}

<div class="main__show-video">
      <svg viewBox="0 0 115 115"> 
       <defs>
    <filter id="dropshadow" x="-20%" y="-20%" width="150%" height="200%">
        <feOffset result="offsetResult" in="SourceAlpha" dx="1" dy="1" />
        <feGaussianBlur result="blurResult" in="offsetResult" stdDeviation="4" flood-color="blue" />
        <feBlend in="SourceGraphic" in2="blurResult" mode="normal" />
    </filter>
</defs>    
      <circle cx="50%" cy="50%" r="49px" fill="#383887" stroke="#4A4A4A" stroke-width="4"/>
      <polygon transform="translate(9, 8)" points="35,30 75,50 35,70" />
    </svg>
 
</div>

Цветная тень

<feDropShadow  in="blurResult" result="greenResult"   flood-color="#383887" />

.main__show-video {
width:15vw;
height:auto;
}
polygon {
fill:#fff;
stroke:#4A4A4A;
stroke-width:3;

}
circle:hover {filter:url(#dropshadow);}

<div class="main__show-video">
  
    <svg viewBox="0 0 120 120"> 
       <defs>
    <filter id="dropshadow" x="-10%" y="-10%" width="150%" height="150%">
        <feOffset result="offsetResult" in="SourceAlpha" dx="1" dy="1" />
        <feGaussianBlur result="blurResult" in="offsetResult" stdDeviation="4"  />
         <feDropShadow  in="blurResult" result="greenResult"   flood-color="#383887" />
        <feBlend in="SourceGraphic" in2="greenResult" mode="normal" />
    </filter>
</defs>    
      <circle cx="50%" cy="50%" r="49px" fill="#383887" stroke="#4A4A4A" stroke-width="4"/>
      <polygon transform="translate(12, 10)" points="35,30 75,50 35,70" />
    </svg>
  
</div>

БЛОГ НА HUSL

Тень накладывается на кнопку, а не на картинку внутри

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

SVG filter