Картинка на кнопке в CSS

Question

Картинка на кнопке в CSS

Александр Знаток (276), на голосовании 1 год назад

Есть кнопка <button>Download</button>, с каким то background-color, как сделать, что бы при наведении надпись менялась на картинку?

Answer 1

Саня Семенов Оракул (60497) 1 год назад

 button:hover{background-url: "path to image"}

Александр Знаток (276) 1 год назад

Вроде как, так и делаю, но что то не срабатывает, не посмотрите?

HTML
<button class="but">Download</button>

CSS

 .but{
    position: absolute;
    top: 250px;
    left: 270px;
    width: 150px;
    height: 50px;
    border-radius: 50px;
    background-color: purple;
    color: white;
}


.but:hover{
    background-image: url('images/Download.png'); 
}

Саня Семенов Оракул (60497) Александр ,

https://codepen.io/norbert123/pen/wvQWveZ
адрес картинки надо вписывать правильно (проще если он будет начинаться со слеша и содержать полный путь к картинке от корня сайта чем возится с относительным как у тебя )
потом надо будет докрутить картинку через background-position
очень старый способ так делали когда не было круглых углов градиентов и т п а сейчас можно с помщью css что хочешь творить и оно будет под любое разрешение экрана а картинка фиксированная так и останется