CSS фичи #17 анимированная неоновая кнопка | CSS3 Button Style Neon Style
Вставка
- Опубліковано 8 лют 2025
- Сегодня делаем крутую CSS фичу - это неоновая кнопка с анимацией рамки. Разберем свойства transitions, которые позволяют делать такой эффект.
============================
Интенсив по Ruby on Rails bit.ly/3448Y5s
Канал "Хороший программист" с бесплатными уроками по Ruby / @goodprogrammer
============================
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Больше контента в нашей группе Вконтакте
glo_aca...
Присоединяйтесь к нашему сообществу Discord
/ discord
Telegram-канал "Лысый из браузера":
tele.click/bal...
Чтобы записаться на мой курс по основам веб-разработки, напиши в нашу группу и мой ассистент скажет тебе, что делать дальше: vk.me/glo_academy
Заказать рекламу на канале: vk.me/aislam23 или t.me/aislam23
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma...
ttttt.me/figma...
ttttt.me/figma...
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codep...
ttttt.me/css_f...
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkf...
О да. Наконец-то CSS фичи! Очень жду и JS-фичи. :) Спасибо за видеоролики!
Это наикрутейший ховер, который я когда-либо видела 💥 обязательно к повторению 💫
Братуня да это же супер-шик модерн.Красава,всё красиво нарисовал
Круто что ты показываешь свои ошибки
Как же приятно смотреть,лайк и подписка сразу!!
Ты просто мега круто объясняешь, даже такой тупорез, как я все понял, а это уже о чем то говорит )))) Сохранил это видео к себе в альбом "Практика". Буду еще пересматривать. А сейчас дальше пойду "копать" у тебя в плейлистах чего интересного)
Офигенная рубрика, по-тихоньку учишься всему
Ура, новое видео! Спасибо, Артём
CSS НИШТЯКИ!!Спасибо за урок!!!
Чел, это просто ахуенно!
Очень круто. Спасибо! Лайк и подписка.
очень крутая анимация, спасибо за такие классные видео, автор очень хорошо объясняет )))
Чувак, это бомба!
Красава Брать. Спасибо за гайд. Очень полезно было :)
Спасибо за видео Артём!! Как раз кнопку на сайте делал и не знал как оригинальней!
Спасибо большое. Было бы здорово в будущем посмотреть видео про шрифты, как пользоваться размерами, что лучше всего использовать, vw pt или em rem. Если есть на канале такое видео, буду рад ссылке, может быть не теми словами искал и не нашёл.
Благодарю
Топ
Однозначно подписываюсь! Спасибо за урок!
Красава всё четко объяснил
Крутейшие идеи... спасибо!!!
Очень круто 👍👍👍
Beautiful neon effect
Лайк, подписка, прикольно, ждём ещё ! Спасибо и удачи броу.
Ты просто шикарен братан,
Мега круто! еще, еще, еще)
Благодарю Вас за видео.
Спасибо, а если бы еще горячие клавиши комментировал, то ролику цены бы не было
аххуууенно я бы сказал 😅
Очень здорово получилось!
Отличная идея, спасибо))
Круто
Огонь, про ХП рассказали ))
Ой ну это лайк господа
Благодарю !
спасибо )
Спасибо, за классный эффект
Это просто пушка
Супер!
Артем ты очень крутой, рахмет за видеосы
Офигенно лайк !
Это анимированная красивая кнопка
очень круто. спасибо за видео
Вооооу, крутая кнопка!
Beautiful
Круто-круто. Движение линий, пожалуй, се6е спишу на сайт.
Спасибо , полезно !:)
а как избавиться от обратного возвращения полос при уходе курсора с кнопки ?
Вау
Просто лучший
спасибо за идею)))
Спасибо!
Крутая анимация .спасибо
Классная фича, каждый раз смотрю и каждый раз узнаю новые CSS свойства.
Хотелось бы узнать цвет (color) background(а) элемента body в самом начале видео))
#07131E
Крутяк)) спасибо
А как можно менять стиль этих линий?)) Хочется сделать их 8-bit, чтобы такие пиксельные были...старенькие))
Привет, я только не очень понял а как css файл то подключили к html)?
Годно!
конечно лайк!
Можно как-то анимацию с линиями зациклить? Что-бы все время при наведении работала.
А как сделать прямоугольное поле ввода используя html и css?
Огонь
А как мне сделать такую вторую кнопку рядом и другого цвета?
Интересненько
вау!!!!
Спасибо за хорошее видео
можно спросить? А на Sublime Text 3 подойдёт сборка ?
я подписалась)
Я с недавних пор начала учить фронтенд, и для меня кажется трудной всё это, или это только сейчас мне так кажется? Посоветуйте мне что-нибудь пожалуйста.
Здорово
Можно ли использовать кнопку для отправки формы?
Как подключить?
У меня выходит что линия что сверху проходит прямо над буквами внутри кнопки, при этом значение top 0
В чем может быть дело?
Через два года отвечу!
В отступах!
А какой шрифт в этом редакторе кода?
Выглядит здорово. Для круглой кнопки такое сделать возможно?
Попробовать стоит, но будет криво))
Можно код? Исходник
помогите, у меня почему то не работает с самого начала, а я никак не найду ошибки. я что то не так сделала или просто это немного устарело?
Button
Я вроде бы всё так же сделал, но такого эффекта не получил. Нет, само всё работает, но света вообще нет=(. Кто знает в чём проблема, можете помочь? В чём может быть проблема?
Помочь?
Круто
А сразу box-shadow 0 0 80px поставить ? а не 3 по 20 40 80
?
Попробуй. Эффект будет другой
А я -98 для bottom написал все работает
Возьми в привычку выкладывать код.
Написал всё также . Ничего не работает
Невидно код, слишком мелкий шрифт, шрифт нужен в 3 раза больше минимум
Покажи как сделать чат на своем сайте
Было бы круто чтоб клиент мог тебе написать прям на сайте а ты ответить
Такое есть уже. Ставится на сайт за 2 минуты
@@Glo_Academy Привет это хорошо что ставится за 2 мин но ещо лутше было бы сделать неоновый чат покажеш как сделать буду благодарен
не очень понятно зачем делать tutorial такой же, как на канале Online Tutorials, немного изменив появление линий...
Прост
@@Glo_Academy понял, принял)
Пересел на винду?)))
Нет, просто шрифт Consolas - это тот шрифт, который используется в Sublime Text на Windows. На маке по умолчанию другой
Важное уточнение: если вы делаете кнопку, то элемент должен быть "button", а не "a". Каждый элемент должен выполнять свою функцию.
Опять же не всегда, смотря какой функционал у кнопки
@@dderkachev я имею ввиду, что есть куча верстальщиков, которые делают ссылку кнопкой, превентят поведение ссылки (переход согласно атрибута href) и юзают как кнопку. Если есть атрибут href, то это ссылка и она должна куда-то вести, и не надо называть это кнопкой. Это ссылка
@@FFizmaTT а в чем проблема потом прописать в href куда эта кнопка будет вести?
Если атрибут href у ссылки ведет куда-то внешне, то это должна быть ссылка. Если в пределах сайта, то ссылка может быть стилизована как кнопка.
И вообще, здесь как пример стилизации, а не урок по семантике.
@@a1ouder 0:13 "Один из *подписчиков подсказал* мне такой интересный эффект для неоновой кнопки. Которая не просто зажигается неоновым свечением, а ещё имеет динамическую обводку с четырьмя разными элементам по краям".
Ogon'
кто нибудь, скопируйте и вставьте сюда, а то я сам это не напишу.
Я так понимаю идея ролика взята с єтого видео... ua-cam.com/video/ex7jGbyFgpA/v-deo.html&t
Фичу подсказал подписчик. Другие видео на эту тему я не смотрел перед записью видео. Фишка взята с codepen
Только тупые поставили дизлайк