Красивые анимированные кнопки для сайта на css (видеоурок)
Недавно бродила по просторам англоязычной сети в поисках новых идей и решений на тему вебразработки, результатом этого стал этот видеоурок, где я хочу поделиться одной из тех идей, которую подсмотрела на одном из тех сайтов.
И урок этот будет о том, как установить на свой сайт красивые анимированные кнопки с помощью CSS с "пузырьковым" эффектом.
Причем эти кнопки можно устанавливать не только на MaxSite, но на любой и даже статический сайт.
И еще, меня удивило то, что в принципе для этих кнопок не нужно подключать никакие скрипты,так как они основаны полностью на CSS3. Что облегчает задачу установки таких кнопок на сайт и сводит к минимуму тех файлов, которые нужно использовать в процессе.
У кнопок может варьироваться размер (большие, средние и маленькие кнопки) и цвет (синий, зеленый, оранжевый и серый).
Эффект движущихся пузырьков достигается за счет позиционирования с четырех разных сторон одного и того же фона одной и той же кнопки при наведении. Все это делается с помощью свойства transition.
Ладно, не буду вдаваться в подробности. Нам с вами не нужно так глубоко в это окунаться, это сделал за нас тот, кто создал эти кнопки.
А мы с вами займемся самой простой частью - размещением кнопок на своем сайте. Сама процедура совсем не сложная. Просто нужно закачать пару файлов и проделать несколько простых шагов. Все вы увидите в видео, поэтому давайте не будем тянуть с этим и приступим к просмотру урока.
Видеоурок "Анимированные кнопки на CSS для сайта"
Архив с материалами для урока вы можете скачать по этой ссылке.
Посмотреть демо можно здесь.
Если будут какие-то вопросы по видеоуроку, пожалуйста, задавайте их в комментариях.
Спасибо за внимание!
Автор статьи: Елена Лощилова.
ВНИМАНИЕ! Новый шаблон Aspirin!
Привет друзья, это Сергей. Пользуясь случаем, хочу сообщить, что в эту среду поступит в продажу новый шаблон для MaxSite CMS - Aspirin.
Ниже я привел скриншот этого шаблона. Он является ссылкой, нажав на которую, вы увидите шаблон в живую. Он уже практически готов, и проходит последние стадии тестирования и доработки.
Нажми на картинку, что бы увидеть шаблон.
Стоимость шаблона: 850 рублей.
Над шаблоном работаем я и Елена.
Спасибо за внимание!
Как альтернатива можно использовать мой вариант (онлайн генератор):
https://alexanderschilling.net/page/onlajn-servis-dlja-sozdanie-elementov-interfejsa
Здравствуйте Елена!
На первый взгляд кажется всё элементарно, но для такого чайника, как я, нужны дополнительные комментарии.
Во-первых, мне показалось, что в файле buttons.css, который имеется в архиве для скачивания, не совсем то, что в видеоуроке.
Во-вторых, что меня действительно давно интересует, это как бы применить такие или подобные стили (в виде кнопки) к [cut] или [xcut]?
На что меня хватило, так это для [cut] в админке написать "Открыть", через файловый менеджер (var_style) применить цвет фона и сделать ссылку мигающей (blink).
Сейчас я всё это дело уже убрал.
Буду очень Вам признателен, если поможете мне разобраться с этим вопросом!
Для связи со мной email: [email protected] или через сайт: samodelkin-vn.ru
С Уважением,
Алексей.
Елена при скачки архива есть три папки ( бьюттонс) Css и Img и еще файл html в папке ( бьюттос) находятся два файла картинка png и файл css все более нечего!?
Владимир! Все правильно. Это все файлы, которые нужны для работы.
Здравствуйте. Я как чайник ничего не поняла и ничего не видно, мне нужно поподробней, а так для меня бесполезное видио...
Алексей! В архиве находятся абсолютно те же самые файлы, что я использовала в уроке.
Насчет cut - туда эти кнопки я пока ставить не пробовала. Скорее всего, к стилям, которые отвечают за cut (а именно span.cut а в шаблоне default), нужно будет найти в файле buttons.css те стили, которые вам именно будут нужны - в зависимости от того, какого цвета и размера кнопки вы хотите, и просто прописать их.
Потом с помощью отступов выровнять местоположение кнопки и с помощью cвойства line-heihgt выровнять надпись на кнопке.
Татьяна! Чтобы видео было удобно смотреть, нужно его сделать на весь экран и поставить в настойках 720p HD. Тогда будет все видно
Елена, спасибо за совет.
Будет время - поэкспериментирую.
Пожалуйста, Алексей! Если будут еще вопросы - задавайте!
Елена мне урок понравился, молодец! У меня вопросов не возникло, все достаточно просто и понятно, конечно для тех кто знаком с CSS и HTML. Спасибо!
И вам спасибо за комментарий, Олег!
Спасибо Елена.Все достаточно понятно. Обязательно воспользуюсь вашим уроком.
Пожалуйста, Евгения!
Мне урок понравился, все понятно, т.к. я знаком с html и css. Но для неопытных пользователей, видимо надо было показать поподробнее и помедленнее. Хотя, можно просмотреть три раза подряд . Кнопки мне тоже понравились, только ставить их нужно там где они будут соответствовать общему виду (чтобы не создавать эффект новогодней елки).
А мне не понравилось,какие-то тупые кнопки и криво как-то,ну непонятно мне.Для чайников можно было бы поподробнее и понятнее.
Петр! Абсолютно с вами согласна - с анимированными элементами на сайте нельзя перебарщивать. Спасибо за комментарий вам!
Виктор, "на вкус и цвет...", как говорится В любом случае спасибо за комментарий - в следующих уроках буду помедленнее и понятней объяснять, специально для чайников. ;)
А прикольно, можно с кодом кнопки помудрить. Хороший урок, Елена, все понятно.
Спасибо, Михаил!
Здравствуйте Елена как зделать это на ucoz? можно ли это зделать ?
Здравствуйте, Влад!
Думаю, что можно. Но я сама с укозом близко не знакома, поэтому подсказать точно, как это сделать, не смогу...
Елена спасибо тебе большое я установил но мой сайт https://seostrit.pusku.com эти кнопки и очень доволен спасибо тебе
Пожалуйста
Приветствую, Елена! Снова благодарю Вас за отличные уроки. На сайте, созданном по Вашему тренингу ПССР в марте т.г., переделала ссылки в сайдбаре на кнопки. Все получилось! Частенько захожу сюда, чтобы что-то усовершенствовать на сайте по Вашим и Сережиным урокам. Спасибо еще сто раз, успехов вам обоим и новых творческих решений!!!
https://doverie-da.ru
Здравствуйте!
Отличные кнопки и все прекрасно подключилось, но подскажите кто-нибудь как изменять цвет шрифта при нажатии на кнопку и чтобы этот цвет оставался а не исчезал как только курсор отводишь от кнопки. Обычно наоборот бывает нажимаешь на кнопку и цвет шрифта меняется, а тут я пробую менять в пункте hover но ничего не получается или получается только при нажатии а потом исчезает а мне нужно чтобы если кнопка активная то цвет так и оставался другой, кто может подсказать? Может там еще нужно написать какой-то другой код или что? Заранее благодарю за ответ.
Псевдокласс
:hover
отвечает за изменения при наведении курсора.:active
- при клике по объекту мышкой.Цвет шрифта меняется при помощи свойства
color
Вы что конкретно хотите сделать?
Я хочу чтобы цвет шрифта менялся не только при наведении но и оставался таким пока эта кнопка меню включена, у меня просто на шаблоне сайта по которому я учусь нет свойства :active а только :hover и после нажатия цвет меняется надолго там, а тут и то и то есть и я думаю что наверное нужно что-то убрать из этого? Оставить или :active или :hover? То есть я хочу чтобы нажать на кнопку и цвет шрифта поменялся и оставался таким пока я не нажму на другую кнопку. Ну короче не знаю как еще объяснить.
Ну вот как на этом сайте когда нажимаете на пункт менюшки то цвет становится белым а шрифт черным и после отведения курсора не исчезают, вот я тоже хочу чтобы так получилось, чтобы было видно какой пункт меню сейчас включен, а то зажглось и выключилось сразу.
Подскажите пожалуйста кто-нибудь, я выложил страницу на хостинг, а эти кнопки стали обычные почему-то, на компьютере все нормально работает, а в сети никакой анимации нет, что я сделал не так?
Понятно, никто не знает значит.
Если вы внимательно посмотрите на код главного меню. То увидите, что когда мы переходим по одному из пунктов, к нему на следующей странице добавляется класс, который и делает его таким как при наведении.
классные кнопки, спасибо кста, кто не разобрался вместо пузырей в png можно напихать все что угодно