Три способа сделать кнопку с небольшим затемнением при наведении используя HTML & CSS hover effect

Всем привет!

В этом видео вы узнаете, как сделать небольшой эффект затемнения для кнопки при наведении.

И в этом видео я расскажу несколько способов, как это можно сделать, используя HTML и CSS шаг за шагом.

Итак, приступим к созданию кнопки с Hover эффектом при наведении.

У нас есть файл index.html, style.css.

стили подключены, также подключены шрифты и добавлены простые обнуляющие стили.

Теперь давайте внутри в баге создадим button, кнопку с контентом button.

Откроем браузер, посмотрим, что у нас добавилось.

Итак, мы видим, есть кнопка, давайте свернем браузер в половину и Visual Studio Code и будем

стилизовать все эти элементы.

В стилях обратимся к селектору тега Body.

Для него укажем ширина 100%, минимальная высота будет 100VH.

Сделаем размещение для кнопки по центру.

Укажем Display Flex, Justify Content Center и Align Items.

Также будет центр.

И добавим Background темного цвета.

Как мы видим, кнопка размещается по центру и Background у нас идет темный.

Теперь здесь ниже давайте добавим псевдокласс root и зададим две переменные.

Первая переменная это будет у нас standard button color.

Так будет называться стандартный цвет для кнопки.

И выберем такой вот цветовой код.

И здесь ниже создадим вторую переменную, которая будет называться у нас HoverButtonColor.

То есть тот цвет, который у нас будет ее затемнять.

Давайте пока что еще сюда не будем ничего добавлять.

Чуть попозже я объясню, как можно несколькими способами сделать

Затемнение для кнопки.

Теперь давайте добавим стили для кнопки.

Обратимся к селектору тега Button.

Укажем Display Inline Block.

Добавим пэддинги.

Пэддинг отступ сверху и снизу будет на 1.5 рэм.

5 рэм справа и слева.

Добавим Border Radius.

Скрупление углов со всех сторон на 0.5 рэм.

Также укажем Font Size на 0.5.

1.8 рам немного увеличим размер для кнопки и добавим background color и выберем переменную переменная у нас будет с названием standard button color такой вот цвет теперь давайте также еще укажем курсор pointer чтобы при наведении курсор менялся на указательный масштабируем ее немного чтобы было лучше видно и нам нужно

добавить Hover Effect, чтобы эта кнопка у нас была немного затемненной.

Давайте здесь обратимся к Button и добавим псевдокласс Hover.

И первое, что приходит на ум, как сделать затемнение, это использовать свойство Opacity, то есть непрозрачность.

То есть мы сюда, к Hover Button Color, к этой переменной указываем

Например, у нас стоит задача сделать затемнение на 10%, чтобы немного было темнее.

Мы здесь указываем 0.09.

Это будет у нас значение для Opacity.

А сюда, к Hover Effect, мы указываем Opacity, выбираем Var и выбираем переменную Hover Button Color.

Теперь, когда мы наводим на кнопку, у нас идет небольшое затемнение на 10%.

Если мы здесь укажем 0.8, то будет на 20% затемняться.

Если мы здесь укажем 0.2, то соответственно на 80%.

И будет кнопка уже более темной.

Давайте еще добавим сюда Transition для более плавного перехода.

Укажем all для всех элементов и 300 миллисекунд.

Когда мы наводим, идет такой плавный переход.

Но в чем минус применения opacity?

В том, что opacity у нас делает непрозрачным как background, так и саму надпись button.

Давайте, например, здесь укажем opacity.

color белый то есть при наведении у нас цвет должен меняться на белый мы наводим на нашу кнопку мы наводим но как мы видим у нас применено opacity и это очень сильно влияет и на надпись на bottom поэтому этот способ нам не совсем подходит давайте рассмотрим второй способ как это можно еще сделать

более правильно здесь давайте уберем opacity значение теперь нажмем правой кнопкой мыши и выберем посмотреть код нам нужно открыть панель разработчика и здесь нам нужно найти вот этот вот цвет который мы применяем для нашей переменной вот мы его нашли мы его нажимаем на него

Здесь у нас открывается палитра.

Вот нашелся этот цвет в формате hex, то есть литеричный код.

И здесь внизу есть такой ползунок, который мы будем перемещать.

И мы видим, есть затемнение.

То есть это непрозрачность для этого цвета.

И как мы видим, мы выкрутили в конец.

Сейчас у нас идет 6 цифр.

Но когда мы его начинаем крутить в эту сторону, то добавляется еще два значения.

И вот мы можем здесь немного добавить непрозрачности, допустим такой.

Отсюда скопировать этот код.

И вставим сюда, к нашей переменной HoverButtonColor.

Сюда мы указываем BackgroundColor.

Добавляем переменную HoverButtonColor.

И при наведении у нас идет затемнение.

Но при этом...

Если мы здесь укажем, давайте выкрутим, сделаем потемнее, здесь добавим 21, как здесь у нас.

Наводим, кнопка становится совсем темной, но при этом, когда мы укажем цвет белый, то это не будет сказываться.

То есть, как было при методе с opacity.

Наводим, цвет белый, все корректно.

Если нам нужно...

Например, чтобы немного был затемнен у нас этот элемент, наша кнопка.

Мы здесь выкручиваем немного и, соответственно, так и будет небольшое затемнение.

Здесь, опять же, не совсем удобно, потому что мы не понимаем, на сколько процентов затемняется E3.

Это может быть, например, и 10, и 8, или 12.

Здесь не совсем понятно.

Как опять же еще одно решение, как четко понять, насколько нам нужно процентов затемнить нашу кнопку.

Давайте отсюда удалим The Hover Effect.

И здесь также, здесь мы будем решать эту проблему.

Здесь мы нажимаем сюда на эти значки, изменяем на RGB.

И мы видим этот цвет в формате RGB.

Сюда нажимаем.

вместо вот этого вот цифрового кода мы туда указываем rgb и давайте вернем обратно исчез у нас так выбираем меняем на rgb давайте здесь ниже выберем rgb это будет 248

210 и 248 такой вот у нас будет rgb формат для вот этого вот кода заменяем здесь здесь в конце добавим один то есть элемент у нас будет полноцветный так а теперь нам нужно добавить небольшую

Небольшое затемнение для кнопки.

Что мы делаем?

Мы сюда добавляем RGBA с альфа-каналом.

Также сюда можно, поскольку здесь мы также выбрали этот альфа-канал, который у нас помечается единицей, то есть это полный цвет.

Сюда мы копируем эти значения этого же цвета для Hover Bottom Color.

И здесь мы меняем место единицы, если это 100%.

Единица это 100%.

то 0.9 это затемнение на 10%.

Наводим и видим небольшое затемнение.

То есть здесь более четко мы можем.

Если мы хотим, например, чтобы затемнение на 5, мы здесь указываем 0.95.

Наводим.

Или там, например, на 30% здесь указываем 0.7.

И более темнее будет у нас Power Effect.

Указываем 0.5 на 50%.

И так же все будет работать.

Если мы здесь также укажем цвет белый для самой надписи, то все будет корректно отображаться.

И здесь меняться, и здесь.

Вот такие вот несколько способов, как сделать Power Effect, небольшое затемнение для кнопки, используя такие вот методы.

Итак, на этом все.

Спасибо за просмотр и успехов в обучении.

Если вам понравилось данное видео, ставьте лайк и подписывайтесь на мой канал.