Хаки и Скрипты Next Generation CMS : CSS, Текст и ссылки, Кнопки и иконки : Стильные CSS3 hover эффекты

irbees2008 Опубликовано - 31 - августа CSS

Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: нужны навыки css html
Демо:

Представляю вам коллекцию CSS3 hover эффектов для кнопок, логотипов,ссылок.Сейчас мы добавим эти эффекты к нашим кнопкам.
Итак приступим.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и смотрим исходник,он нам понадобится.
2.В head подключаем файл стилей

Код:

<link href="{{ tpl_url }}/css/hover.css" rel="stylesheet" media="all">

3.Можно и не подключать а взять из стилей нужное оформление
обязательное оформление нашей кнопки

Код:

.button {
  margin: .4em;
  padding: 1em;
  cursor: pointer;
  background: #F08258;
  text-decoration: none;
  color: #0F0F0F;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

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

Код:

<a href="#" class="button">Купить</a>

5.Теперь добавим эффект прописав нужный класс стиля

Код:

<a href="#" class="button grow-rotate">Купить</a>

6.Как видите из примера мы добавили класс grow-rotate ,вот стиль нашей кнопки из файла Hover.css

Код:

/* Grow Rotate */
.grow-rotate {
    display: inline-block;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
    -webkit-transition-property: transform;
            transition-property: transform;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow-rotate:hover,
.grow-rotate:focus,
.grow-rotate:active{
    -webkit-transform: scale(1.1) rotate(4deg);
            transform: scale(1.1) rotate(4deg);
}

7.Вот и все,есть вопросы пишите.

Можешь почитать и вот эту статейку "Расширяем профиль юзера"

Это тоже интересно

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