• Главная
  • WEB студия
    • Услуги и Цены
    • Домены
    • Хостинг и Почта
    • Сайт-Визитка
    • Интернет-магазин
    • Поддержка сайта
    • Портфолио
  • Продвижение сайта
    • Контекстная реклама
    • Семантическое ядро
    • SEO продвижение сайта
  • Социальные сети
    • SMO/SMM-продвижение
    • Создание и ведение групп
    • Автопостинг новостей
  • Парсинг сайтов
    • Зачем нужен парсинг?
    • Зачем нужен парсинг?
    • Анализ цен конкурентов
  • Журнал о Web
    • Поисковые системы
    • Все о SEO
    • Все о SMM
    • jQuery скрипты
    • Малый бизнес
  • Справочники
    • HTML
    • CSS
    • PHP
    • MySQL
    • jQuery
  • Информация
    • Кто МЫ!?
    • Контакты
    • Оплата услуг
    • Спасибо Вам
  • Инструменты
  • SEOker
  • SIZEr
  • HTML редактор
  • Наши проекты
  • W1CMS.ru
  • DiiF.ru
  • MinURL.ru

hover.css: красивая анимация для ваших кнопок

Коллекция различных видов CSS3 анимации, которые можно применит к кнопкам, логотипам и другим объектам.

  1. Главная
  2. Все про CSS

Коллекция различных видов CSS3 анимации, которые можно применит к кнопкам, логотипам и другим объектам.

Демо Скачать

Если вы нажмете скачать, то в архиве Вы получите для css файла, полный и мини вариант hover.css

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


К примеру, мы хотим эффект Grow:

  • Качаем hover.css
  • В файле hover.css, находим стиль для анимации типа 'Grow' (комментарии в помощь):
/* Grow */
.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
  • Копируем эффект к себе в таблицу стилей.
  • В HTML коде, нужному элементу выставляем класс .grow.

К примеру, применим данную анимацию к ссылке:

<a class="button">Add to Basket</a>

Добавляем нужный класс:

<a class="button grow">Add to Basket</a>

Подключение всех стилей

Если вы планируете пользоваться всеми стилями, то подключите весь файл hover.css.

  • Скачайте hover-min.css
  • Добавьте файл hover-min.css в ваш рабочий каталог с css файлами
  • Подключите hover-min.css в :
<head>
<link href="css/hover-min.css" rel="stylesheet">
</head>

  • Выберите эффект и примените его для нужного объекта.

Рекомендуем

Теги

SEO HTML CSS JavaScript

Есть сайт, но нет клиентов? Думаете что от сайта нет никакого толка?
Покажите его нам, и мы бесплатно расскажем вам обо всех недочетах вашего сайта, мешающих вам зарабатывать деньги!

Бесплатный анализ сайтов

Веб-студия

  • Услуги и Цены
  • Аренда сайтов
  • Реклама на наших проектах
  • Журнал о Web технологиях

Сделаем

  • Сайт-Визитку
  • Интернет-магазин
  • Landing Page
  • Поддержка сайта

Заполним

  • Написание статей
  • Обмен данными
  • Парсинг сайтов

Продвинем

  • Контекстная реклама
  • Продвижение сайта
  • Социальные сети
  • Автопостинг новостей

Наши контакты

W1C : Первый Веб-Консультант
mail@w1c.ru
Пн - Пт: 10:00 - 20:00

Дизайн и разработка сайта - W1C на W1CMS
W1C : Web First Consultant - Intelligence everywhere ©