Красивые анимированные кнопки для сайта (видеоурок).

Суббота, 09 февраля 2013 года в 10:23      Просмотров: 2732
Красивые анимированные кнопки для сайта (видеоурок).

Недавно бродила по просторам англоязычной сети в поисках новых идей и решений на тему вебразработки, результатом этого стал этот видеоурок, где я хочу поделиться одной из тех идей, которую подсмотрела на одном из тех сайтов.

И урок этот будет о том, как установить на свой сайт красивые анимированные кнопки с "пузырьковым" эффектом.

Причем эти кнопки можно устанавливать не только на MaxSite, но на любой и даже статический сайт.

И еще, меня удивило то, что в принципе для этих кнопок не нужно подключать никакие скрипты,так как они основаны полностью на CSS3. Что облегчает задачу установки таких кнопок на сайт и сводит к минимуму тех файлов, которые нужно использовать в процессе.

У кнопок может варьироваться размер (большие, средние и маленькие кнопки) и цвет (синий, зеленый, оранжевый и серый).

Эффект движущихся пузырьков достигается за счет позиционирования с четырех разных сторон одного и того же фона одной и той же кнопки при наведении. Все это делается с помощью свойства transition. raspberry

Ладно, не буду вдаваться в подробности. Нам с вами не нужно так глубоко в это окунаться, это сделал за нас тот, кто создал эти кнопки.

А мы с вами займемся самой простой частью - размещением кнопок на своем сайте. Сама процедура совсем не сложная. Просто нужно закачать пару файлов и проделать несколько простых шагов. Все вы увидите в видео, поэтому давайте не будем тянуть с этим и приступим к просмотру урока.

Видеоурок "Анимированные кнопки для сайта"


Архив с материалами для урока вы можете скачать по этой ссылке.

Посмотреть демо можно здесь.

Если будут какие-то вопросы по видеоуроку, пожалуйста, задавайте их в комментариях.

Спасибо за внимание! wink

Автор статьи: Елена Лощилова.


ВНИМАНИЕ! Новый шаблон Aspirin!

Привет друзья, это Сергей. Пользуясь случаем, хочу сообщить, что в эту среду поступит в продажу новый шаблон для MaxSite CMS - Aspirin.

Ниже я привел скриншот этого шаблона. Он является ссылкой, нажав на которую, вы увидите шаблон в живую. Он уже практически готов, и проходит последние стадии тестирования и доработки.



Шаблон Aspirin

Нажми на картинку, что бы увидеть шаблон.



Стоимость шаблона: 850 рублей.

Но в среду и четверг любой желающий сможет заказать его по цене 601 рубль!!!

Над шаблоном работаем я и Елена.

Спасибо за внимание!

Комментариев: 22

Как альтернатива можно использовать мой вариант (онлайн генератор):

http://alexanderschilling.net/page/onlajn-servis-dlja-sozdanie-elementov-interfejsa

Здравствуйте Елена!

На первый взгляд кажется всё элементарно, но для такого чайника, как я, нужны дополнительные комментарии.

Во-первых, мне показалось, что в файле buttons.css, который имеется в архиве для скачивания, не совсем то, что в видеоуроке.

Во-вторых, что меня действительно давно интересует, это как бы применить такие или подобные стили (в виде кнопки) к [cut] или [xcut]?

На что меня хватило, так это для [cut] в админке написать "Открыть", через файловый менеджер (var_style) применить цвет фона и сделать ссылку мигающей (blink).

Сейчас я всё это дело уже убрал.

Буду очень Вам признателен, если поможете мне разобраться с этим вопросом!

Для связи со мной email: samodelkin-vn@mail.ru или через сайт: samodelkin-vn.ru

С Уважением,

Алексей.

Елена при скачки архива есть три папки ( бьюттонс) Css и Img и еще файл html в папке ( бьюттос) находятся два файла картинка png и файл css все более нечего!?

5. Татьяна
2013-02-11 в 13:49:32

Здравствуйте. Я как чайник ничего не поняла и ничего не видно, мне нужно поподробней, а так для меня бесполезное видио...

Алексей! В архиве находятся абсолютно те же самые файлы, что я использовала в уроке.

Насчет cut - туда эти кнопки я пока ставить не пробовала. Скорее всего, к стилям, которые отвечают за cut (а именно span.cut а в шаблоне default), нужно будет найти в файле buttons.css те стили, которые вам именно будут нужны - в зависимости от того, какого цвета и размера кнопки вы хотите, и просто прописать их.

Потом с помощью отступов выровнять местоположение кнопки и с помощью cвойства line-heihgt выровнять надпись на кнопке.

Татьяна! Чтобы видео было удобно смотреть, нужно его сделать на весь экран и поставить в настойках 720p HD. Тогда будет все видно smile

10. Олег Семьянов
2013-02-12 в 15:45:43

Елена мне урок понравился, молодец! У меня вопросов не возникло, все достаточно просто и понятно, конечно для тех кто знаком с CSS и HTML. Спасибо!

12. Евгения
2013-02-12 в 20:04:57

Спасибо Елена.Все достаточно понятно. Обязательно воспользуюсь вашим уроком.

Мне урок понравился, все понятно, т.к. я знаком с html и css. Но для неопытных пользователей, видимо надо было показать поподробнее и помедленнее. Хотя, можно просмотреть три раза подряд smile . Кнопки мне тоже понравились, только ставить их нужно там где они будут соответствовать общему виду (чтобы не создавать эффект новогодней елки).

15. Виктор
2013-02-13 в 20:58:42

А мне не понравилось,какие-то тупые кнопки и криво как-то,ну непонятно мне.Для чайников можно было бы поподробнее и понятнее.

Петр! Абсолютно с вами согласна - с анимированными элементами на сайте нельзя перебарщивать. Спасибо за комментарий вам!

Виктор, "на вкус и цвет...", как говорится smile В любом случае спасибо за комментарий - в следующих уроках буду помедленнее и понятней объяснять, специально для чайников. ;)

А прикольно, можно с кодом кнопки помудрить. Хороший урок, Елена, все понятно.

Здравствуйте Елена как зделать это на ucoz? можно ли это зделать ?

Здравствуйте, Влад! smile

Думаю, что можно. Но я сама с укозом близко не знакома, поэтому подсказать точно, как это сделать, не смогу...

Елена спасибо тебе большое я установил но мой сайт http://seostrit.pusku.com эти кнопки и очень доволен спасибо тебе

Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

Авторизация MaxSiteAuth. Войти через loginza

(обязательно)