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