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

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

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

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

Код:

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

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

Код:

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

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

Код:

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

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

Код:

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

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

Код:

01/* Grow Rotate */
02.grow-rotate {
03    display: inline-block;
04    -webkit-transition-duration: 0.3s;
05            transition-duration: 0.3s;
06    -webkit-transition-property: transform;
07            transition-property: transform;
08    -webkit-transform: translateZ(0);
09            transform: translateZ(0);
10    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
11}
12.grow-rotate:hover,
13.grow-rotate:focus,
14.grow-rotate:active{
15    -webkit-transform: scale(1.1) rotate(4deg);
16            transform: scale(1.1) rotate(4deg);
17}

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

Можешь почитать и вот эту статейку "Тег link /"

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

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