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

Всем привет,уже давненько я ничего не писал,все работа и работа, а на любимое дело времени нет cry .Ну сегодня я увидел новый набор эффектов для кнопок, и они просто обалденные. Ну что же приступим.

Как всегда я выберу для описания первый вариант кнопки,их много и скачав исходник вы можете выбрать свой вариант.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем папки css и font в папку с вашим шаблоном
2.В нашем шаблоне открываем файл main.tpl и в секцию хеад подключаем стиль кнопок и стиль шрифта

Код:
<link rel="stylesheet"  href="{{ tpl_url }}/css/vicons-font.css" />
<link rel="stylesheet" href="{{ tpl_url }}css/buttons.css" />
3.Открываем в исходнике файл index.html и ищем свой вариант,ну мне проще я выбрал первый вариант
Код:
<button class="button button--winona button--border-thin button--round-s" data-text="Open Project"><span>Open Project</span></button>
4.Вот и все ставим код кнопки куда вам нужно,только не забываем в кнопке добавить адрес ,того что она будет делать,это примерно так
Код:
<button src="Ваш адрес переадресации" class="button button--winona button--border-thin button--round-s" data-text="Open Project"><span>Open Project</span></button>
Если что не понятно пишем в коментариях.

Можешь почитать и вот эту статейку "FancyText - jQuery плагин плюс CSS3 анимация. "

mistakes

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

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

Ваше мнение

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

----