Задать вопрос
@krl76
html

Как сделать кнопку-изображение с эффектом hover в html/css?

Приветствую всех! Когда писал страничку сайта, захотелось сделать кнопку-изображение, чтобы при наведении на нее курсора, эта кнопка менялась на другую, немного затемненную. Оставляю кусок кода и два изображения кнопок, чтобы было немного понятней. 
<head>
    <style>
     .controller .btn {
        background: url(/static/data/default button.png);
        display: inline-block;
        cursor: pointer;
        transition: 0.2s;
        }
        .controller .btn:hover {
        background: url(/static/data/check_button.png);
        }
    </style>
</head>
<body>
    <div id="button" class="controller">
        <input type="image" id="snap" class="btn" src="/static/data/default button.png" style="width: 7%; height: 7%">
    </div>
</body>

Остановился пока на данном этапе, подскажите другой способ реализации моей идеи. Заранее спасибо!
P.s:
635806d81b8db711711596.png
Чтобы при наведении курсора из данной кнопки-изображении переходило в эту:
6358071a6378d130369395.png
  • Вопрос задан
  • 276 просмотров
6 комментариев
Подписаться 1 Средний 6 комментариев
Пригласить эксперта
Ответы на вопрос 1
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="img-removebg-preview.png" alt="" width="300" height="300" class="img-btn1">
</body>
<style>
    .img-btn1{
        transition-duration: 0.2s;
        cursor: pointer;
    }
    .img-btn1:hover{
filter:brightness(80%);
transition-duration: 0.2s;

    }
</style>
<script>
    let img_btn1 = document.querySelector('.img-btn1')
    img_btn1.onclick = function(){
        alert("Нажата")
    }
</script>

</html>

Я сделал с одной фоткой, которая затемняется фильтрами. Если резанул края, код есть, так что сорян
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 140 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
HFT программист C#/C++
12 мая 2024, в 00:31
200000 руб./за проект
Разработать приложение WPF на С# для работы с базой данных
11 мая 2024, в 23:57
1000 руб./за проект
Доработка/Разработка OpenCart интернет-магазина
11 мая 2024, в 23:03
1000 руб./за проект
Ещё заказы