Главная страница блога » Анимированные кнопки на CSS

Анимированные кнопки на CSS

Создание выдвигающихся ссылок с использованием анимации CSS3

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

Можно встретить интересный эффект при наведении указателя мыши на ссылку в боковом столбце, при котором она выдвигается из списка. Эффект выдвигания можно анимировать с помощью jQuery, но проще сделать это с помощью анимаций CSS3, и в этом уроке мы объясним, как создать выдвигающиеся ссылки, используя анимации CSS3, без использования jQuery.

Помостреть пример эффекта можно здесь: ДЕМО.

Код HTML
Код HTML будет состоять только из простого списка со ссылками:

Код

Код CSS3
После создания кода HTML мы можем добавить код CSS, который создаст анимацию выдвигания.
У нас уже есть класс у списка, так что мы можем использовать его, чтобы задать свойства CSS.
Для добавления эффекта ссылке при наведении указателя мыши воспользуемся следующим кодом CSS:

Код

.indenting_links li a:hover {
  padding-left:20px;
  -webkit-transition: padding-left 500ms ease-out;
  -moz-transition: padding-left 500ms ease-out;
  -o-transition: padding-left 500ms ease-out;
  transition: padding-left 500ms ease-out;
}

Этот код CSS добавит отступ влево на 20 пикселей при наведении указателя мыши на ссылку с помощью свойства перехода, которому задано значение отступа влево и длительность перехода в 500мс, а также временная характеристика перехода, при которой он быстро начнется и будет замедляться до полной остановки.

Теги: css, CSS3, анимация, Кнопки, Уроки по дизайну

Дата: 29.04.2015, Просмотров: 876, Рейтинг: 4.7 (6), Категория: Уроки по дизайну

Всего комментариев: 0


Имя *:
Email *:
Все смайлы
Код *: