Как создать наведенный курсор на само изображение Png в css - PullRequest
Новая
       1

Как создать наведенный курсор на само изображение Png в css

0 голосов
/ 07 декабря 2018

Я хочу создать зависание вокруг самого изображения png, но я нахожусь вокруг всей сетки.Ана помощь будет высоко ценится.Я просто хочу, чтобы тень была только на изображении Android.

.button1 {
    border: none;
    background-repeat: no-repeat;
    background-size:100%;
    width: 100%;
    height: 100%;
    text-decoration: none;
    
    font-size: 16px;
    
    cursor: pointer;
    outline: none;
}


.button3:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
<!DOCTYPE html>
<html>


<body>
    <div class="grid">
           
 <button id="btnMakeCall" class ="button1 button3">
<img src="http://pngimg.com/uploads/android_logo/android_logo_PNG34.png" style="width:80%; height:auto;" />

 </button>

   </div>
</body>

</html>

1 Ответ

0 голосов
/ 07 декабря 2018

Вы не сможете достичь этого с помощью стандартного файла PNG.Логотип Android может иметь прозрачный фон, но он по-прежнему имеет размеры, делающие его четырехугольным по форме (вот почему ваше изображение - при наведении - показывает тень от вашей кнопки).Вы можете получить желаемый результат, выполнив то, что рекомендует @Pete, или создав спрайт .

Пример

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...