Задать вопрос
@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
  • Вопрос задан
  • 445 просмотров
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>

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создать сервер VPS через wireguard
24 нояб. 2024, в 00:04
5000 руб./за проект
Добавить интеграцию оплаты Telegram Payments 2.0 в Mini App (React)
23 нояб. 2024, в 23:30
3000 руб./за проект
Нарисовать инфографику в 3-х вариантах
23 нояб. 2024, в 23:03
1 руб./за проект
Ещё заказы