ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простые hover-эффект для кнопок на CSS

Простые hover-эффект для кнопок на CSS

Здесь представлены самые популярные или ходовые hover-эффект, которые устанавливают на кнопки, где при наведение меняется гамма цвета. Что можно подобрать одну их многих и применить на сайте или на блоге.

Кстати, кнопки становятся одним из самых важных элементов вашего веб-дизайн.

Так почему бы не одеть их немного и добавить некоторые простые эффекты перехода CSS.

В этом уроке узнаете о четырех простых переходах CSS, которые вы можете использовать, чтобы улучшить свои кнопки и добавить небольшую вспышку на свою веб-страницу.

В вашем CSS-файле вы добавите следующий код CSS в свой button элемент

Код

body > button {
  background: #428BCA;
  color: #fff;
  font-family: Sans-serif;
  font-size: 20px;
  height: 60px;
  width: 150px;
  line-height: 60px;
  margin: 25px 25px;
  text-align: center;
  border: 0;
  transition: all 0.3s ease 0s;
}

Свойства CSS выше могут быть настроены по вашему вкусу. Вероятно у вас уже есть определенные шрифты по умолчанию и размер, особенно если вы используете Bootstrap. Не стесняйтесь добавлять и изменять или вычитать все, что хотите.

Теперь когда выложены основы, давайте продолжим 4 конкретных перехода, которые вы можете применить к своим кнопкам.

Вы можете просмотреть полный код для каждого примера, используя вкладки HTML и CSS в программе просмотра CodePen.

1. Вариант

Чтобы затемнить кнопку, то просто установите цвет фона в темный оттенок, когда: hover активирован.

Код

button:hover {
background: #3071A9
}

2. Вариант

Чтобы потушить элемент, то сначала установите непрозрачность в 1 по умолчанию. Затем уменьшите непрозрачность до 0,75, когда: hover активирован. Не стесняйтесь играть с настройкой непрозрачности.

3. Вариант

Чтобы перейти к цвету кнопки, выберите другой цвет фона, если активирован зависание.

Код

button:hover {
background: #CF4647;
}

4. Вариант

Чтобы создать границу вставки, используйте следующие свойства box-shadow CSS . Не стесняйтесь увеличивать или уменьшать размер тени для ящиков по своему вкусу.

Вывод

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

23 Декабря 2017 Просмотров: 2385 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0