Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 31 - августа CSS
4323 - 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.Вот и все,есть вопросы пишите.

Можешь почитать и вот эту статейку "Протокол Open Graph"

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4572 дня
  • Новостей: 567
  • Комменты: 257
  • Зарегистрированно : 672
  • Онлайн всего: [13]
  • Гости: [12]
  • Поисковики: [1] Яндекс
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.337сек
  • Потребление памяти: 5.164 Mb 
  •   Яндекс.Метрика