Стиль кнопки при наведении?

Question

[marckus]

Кнопка в спокойном состоянии красная,при наведении на неё накладывается 20% прозрачный черный.Как сделать именно что бы он наложился поверх красного?А то у меня получается что она просто становится 20% черной.

Comments

[dk-web]

готового решения вряд предложу..
я такое читал в статьях про препроцессоры.. вот сейчас sass осваиваю - вроде бы там можно смешивать..
//
В препроцессоре Sass имеется функция смешивания цветов для получения на выходе одного, результирующего цвета. Другими словами, у нас имеются два цвета, представленные переменными $color и $color1. C помощью функции mix можно смешать эти два цвета в определенной пропорции, чтобы получить на выходе один результирующий цвет.
// а по существу - может при наведении активируется наложенный div с прозрачностью? как-то через opacity поиграть?

Answer 1

[A K]

Вариантов большое количество, вот один из них: как и требовалось 20% черный (онли css) jsfiddle.net/Symphony/fs3sne1n

Answer 2

[Сергей Сергей]

Очевидно, придется вычислить затемненный красный и вставить в стиль вместо прозрачного черного.

Comments

[marckus]

Так пришлось и сделать,просто интересно,вообще возможно такое наложение.

[Сергей Сергей]

можно сделать красный цвет бекграунда и прозрачную png-картинку.

[Александр Таратин]

Сергей Сергей:
>прозрачную png-картинку.
Аааааааааа!!!!!!!111 Зачем????

[Николай]

Тень внутреннюю на ховер.

[Сергей Сергей]

Александр Таратин: а еще base64 её и в цсс-файл.

[marckus]

Сергей Сергей: В проекте кнопка не одна,а три и все разных цветов.Как бы получается одинаково,что всем цвет для hovera затемнять или каждой свой background задавать и эту картинку.

[Александр Таратин]

Сергей Сергей: Еще лучше... Удалите ваши ответы, они будут вводить в заблуждение новичков.

[Сергей Сергей]

marckus: здесь указали способ с внутренней тенью, вот им проще общий ховер описать.

[edk55]

marckus: https://jsfiddle.net/8pzqpgjw/ Лови.

[Сергей Сергей]

Александр Таратин: неверные варианты тоже нужно упоминать, а от заблуждений уберегут другие ответы.

[marckus]

edk55: Спасибо большое.

[dk-web]

а background-blend-mode это не о том?

[dk-web]

edk55: супер! вообще супер!

Answer 3

[LittleFatNinja]

используй hover