• 2099
  • 0
  • Адаптировал: 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.Вот и все,есть вопросы пишите.

Можешь почитать и вот эту статейку "Красивая галерея в стиле полароид"

mistakes

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

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

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

----