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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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



Шаблон Aspirin

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



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

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

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

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

Комментариев: 31 RSS

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

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

Комментариев: 31
  •  Александр Шиллинг | 9 февраля 2013 в 21:21:39

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

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

  •  Алексей | 10 февраля 2013 в 15:27:53

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

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

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

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

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

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

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

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

    С Уважением,

    Алексей.

  •  Владимир Бердников | 11 февраля 2013 в 13:22:46

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

  •  Елена | 11 февраля 2013 в 13:27:55

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

  •  Татьяна | 11 февраля 2013 в 13:49:32

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

  •  Елена | 11 февраля 2013 в 13:52:06

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

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

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

  •  Елена | 11 февраля 2013 в 13:55:38

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

  •  Алексей | 11 февраля 2013 в 18:23:46

    Елена, спасибо за совет.

    Будет время - поэкспериментирую.

  •  Елена | 12 февраля 2013 в 02:25:45

    Пожалуйста, Алексей! Если будут еще вопросы - задавайте! smile

  •  Олег Семьянов | 12 февраля 2013 в 15:45:43

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

  •  Елена | 12 февраля 2013 в 16:05:47

    И вам спасибо за комментарий, Олег!

  •  Евгения | 12 февраля 2013 в 20:04:57

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

  •  Елена | 13 февраля 2013 в 00:40:36

    Пожалуйста, Евгения!

  •  Петр | 13 февраля 2013 в 19:28:21

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

  •  Виктор | 13 февраля 2013 в 20:58:42

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

  •  Елена | 14 февраля 2013 в 01:32:52

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

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

  •  Михаил | 19 февраля 2013 в 14:19:54

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

  •  Елена | 20 февраля 2013 в 10:14:25

    Спасибо, Михаил! smile

  •  влад | 30 июня 2013 в 17:47:14

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

  •  Елена | 1 июля 2013 в 02:51:10

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

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

  •  Комментатор 635 | 4 июля 2013 в 16:32:28

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

  •  Елена | 4 июля 2013 в 16:56:02

    Пожалуйста smile

  •  Lyudmila Lystzova | 8 октября 2014 в 17:31:02

    Приветствую, Елена! Снова благодарю Вас за отличные уроки. На сайте, созданном по Вашему тренингу ПССР в марте т.г., переделала ссылки в сайдбаре на кнопки. Все получилось! Частенько захожу сюда, чтобы что-то усовершенствовать на сайте по Вашим и Сережиным урокам. Спасибо еще сто раз, успехов вам обоим и новых творческих решений!!!

    https://doverie-da.ru

  •  Влад | 28 апреля 2015 в 13:25:11

    Здравствуйте!

    Отличные кнопки и все прекрасно подключилось, но подскажите кто-нибудь как изменять цвет шрифта при нажатии на кнопку и чтобы этот цвет оставался а не исчезал как только курсор отводишь от кнопки. Обычно наоборот бывает нажимаешь на кнопку и цвет шрифта меняется, а тут я пробую менять в пункте hover но ничего не получается или получается только при нажатии а потом исчезает а мне нужно чтобы если кнопка активная то цвет так и оставался другой, кто может подсказать? Может там еще нужно написать какой-то другой код или что? Заранее благодарю за ответ.

    •  Серёга | 28 апреля 2015 в 13:49:24

      Псевдокласс :hover отвечает за изменения при наведении курсора.

      :active - при клике по объекту мышкой.

      Цвет шрифта меняется при помощи свойства color

      Вы что конкретно хотите сделать?

  •  Влад | 28 апреля 2015 в 16:30:33

    Я хочу чтобы цвет шрифта менялся не только при наведении но и оставался таким пока эта кнопка меню включена, у меня просто на шаблоне сайта по которому я учусь нет свойства :active а только :hover и после нажатия цвет меняется надолго там, а тут и то и то есть и я думаю что наверное нужно что-то убрать из этого? Оставить или :active или :hover? То есть я хочу чтобы нажать на кнопку и цвет шрифта поменялся и оставался таким пока я не нажму на другую кнопку. Ну короче не знаю как еще объяснить.

  •  Влад | 28 апреля 2015 в 18:07:53

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

  •  Влад | 29 апреля 2015 в 17:55:16

    Подскажите пожалуйста кто-нибудь, я выложил страницу на хостинг, а эти кнопки стали обычные почему-то, на компьютере все нормально работает, а в сети никакой анимации нет, что я сделал не так?

  •  Влад | 29 апреля 2015 в 23:37:35

    Понятно, никто не знает значит.

    •  Серёга | 11 мая 2015 в 13:43:57

      Если вы внимательно посмотрите на код главного меню. То увидите, что когда мы переходим по одному из пунктов, к нему на следующей странице добавляется класс, который и делает его таким как при наведении.

  •  Иван | 25 февраля 2016 в 19:07:37

    классные кнопки, спасибоsmile кста, кто не разобрался вместо пузырей в png можно напихать все что угодно