Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Настройка и сопровождение рекламного кабинета во Вконтакте.

от 14000 

Разработка сайтов под ключ. Работаем с такими системами, как Worpress, 1C-Bitrix, Tilda. Закажите разработку в Lion Digital и получите по настоящему продающий сайт.

от 32900 

Услуги SEO копирайтера под ключ. Пишем качественные тексты.

от 950 

Как сделать кнопку активной css

Для изменения стиля кнопки при наведении на нее курсора мыши и при ее активации (нажатии на нее) существуют псевдоклассы :hover и :active соответственно.

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

HTML:

<button class="btn">Кнопка</button>

CSS:

.btn {
  padding: 10px 20px;
  background: linear-gradient(to bottom right, #FF1493, #FF69B4, #FFA07A);
  border-radius: 50px;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.btn:hover {
  background: linear-gradient(to bottom right, #FFDAB9, #FFEFD5, #FFE4E1);
}

.btn:active {
  background: linear-gradient(to bottom right, #FF69B4, #FFA07A, #FF1493);
}

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

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.