Анимация кнопки "Свобода" на HTML и CSS3. Эффекты CSS3 // Как это сделать?
HTML-код
- Опубликовано: 18 ноя 2019
- В этом выпуске "Как это сделать?" покажу как сделать красивую анимацию кнопки на HTML и CSS3, используя эффекты CSS3.
Архив с результатом верстки доступен для подписчиков на патреоне:
/ materialy-knopki-31787294
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Ценю твой ЛАЙК и КОММЕНТ!
Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
Instagram: instagram.com/freelancer.lifestyle/
Facebook: facebook.com/freelancerlifestyle/
подскажите пожалуйста,мне очень нужно ) вы самоучка ?
Тут такое дело.
Соседи снизу стали чаще жаловаться на внезапный грохот, что сопровождался осыпающейся штукатуркой с потолка.
Все это звучало крайне загадочно ровно до тех пор, пока при просмотре очередного увлекательного видео от "Фрилансера по жизни" моя жена, проходя мимо меня, совершенно случайным образом чуть было не наступила на мою отвисшую до пола челюсть. Все стало на свои места, соседи больше не жалуются на грохот. Не потому, что я перестал смотреть контент этого замечательного канала, вовсе нет. Просто моя любимая жена теперь кладет подушку мне между компом и креслом.
P.S. По поводу идеи и реализации анимации кнопки - полное отсутствие дара речи, только одни эмоции. Очень сильно, так держать!
Ахахах, спасибо большое!
Достойно лайка. ТОПЧИК
Спасибо! 👍
Спасибо большое за твои труды! Очень крутой контент!
Хай. Супер. спасибо. Всё получилось. Очень подробно. Видно душу вложил!
Это шедеврально
Супер!! Продолжай в том же духе! Делай еще больше подобных уроков.
Удачи тебе и процветания!
Интересненнькая кнопочка получилась. Спасибо
смотрю такие твои видосы и параллельно сам их верстаю, для меня, ты надиктовываешь довольно быстро, поэтому у меня это что-то вроде челленджа)
такие упражнения помогают мне лучше понять css и находить ошибки в коде, учитывая то, что повторяю я на less)
Анимация класс. Женя, спасибо за очередное интересное видео с классными плюшками. Ждемс с нетерпением очередной видосик)
Спасибо! Их будет ооочччень много :)
Спасибо, что делишься опытом! Однозначно лайк!
Пожалуйста! 👍
Очень полезное видео.Ты как всегда молодец))))))))
Круто!!!! Как всегда на высоте🔥🔥🔥🔥🔥
Спасибо! 🤘
Вам спасибо за то что делитесь своими знаниями и делаете это ясно и понятно!!! Начинаю учится на ваших видео, пока всё получается👍
@@brodyagaPATY супер, я рад!
Ти шикарний!
Спасибо! 👍😊
Это просто 🔥🔥🔥
Круто! З таким наставником, з такою подачею інформації навчання стає хобі!
Круто, спасибо! :)
Пожалуйста! 👍
Спасибо Женя, моя любимая рубрика), как всегда интересно) Я сначала подумал что ты через перспективу будеш крутить😂) 👍👍👍
Спасибо! С перспективой тоже можно будет поиграться) 💪
Спасибо, отличная идея, сделаю подобную кнопку в своем проекте для сдачи в универе) Очень круто!
Супер! Рад что полезно!
Магия!
По другому не не назвать, ты очень крут!
Спасибо! Я стараюсь)
Сделал кнопку по твоему примеру, все получилось как на твоем видео!
Спасибо за урок!
@@pulse_of_cataclysm молодец!
Классный урок ! Свобода превыше всего!!!
Верно!
Спасибо, учитель!
Спасибо, Жека! Ещё одна взрывная примочка!
Пожалуйста! Рад что зашло 👍
@@FreelancerLifeStyle Как и всё, что ты делаешь!
Никогда не видел такой кнопки, очень круто, спасибо!!!
Пожалуйста!
Жду, Когда выделишь несколько уроков по js, потому что ты объясняешь божественно)
Спасибо! Все будет в продолжении курса по верстке
Это гениально и шикарно выглядит, удивил!))) Спасибо!
Супер! Я рад :)
Классно !
Спасибо Женя
Пожалуйста!
Дуже інфортмативний урок!!1 Продовжуй буду, чекати твої відео!!!
Дякую! 👍
Але й класне відео. Дуже дякую, здивував такою фічою, так як я зараз верстаю для портфоліо і рубрика "Як це зробити" виділить мої проєкти серед інших, ще раз дякую!!!
За название кнопки отдельный большой лайк!
😃 👍 Браво!!!
Спасибо!
А вот пойду и сделаю )))
Спасибо желаю твоему канал и подпищикам удачи
Спасибо большое! Взаимно!
Це крутяк!
Ну, ЗА СВОБОДУ! 😊
Это точно) 🤟😅
Как всегда - очень круто) Давай видос про анимацию в ЦСС, уже оочень нужно)
Спасибо! Все будет!
Женя, ты настоящий джедай верстки:))) продолжаю обучаться магии по твоим видео
Я рад!
Супер! СПАсибо =)
стоит приложить минимальные усилия, чтобы стать свободным... но как только прикладывание усилий прекращается - снова несвобода )))
очень философский ролик получился, помимо того, что приятно оттачивать техники с Вами =)
Я на это и расчитывал)
Спасибо за суперконтент.
Пожалуйста!
Это арт-объект уже со своим концептом)
100% :)
Женя, дякую! :)
Бифо без Р)
Идея гуд!
На top, left, right и bottom лучше не давать анимацию (получается рваная), для этого лучше использовать transform: translate. А вообще спасибо за видео, очень интересно👍
Удивлён что никто не написал про два очень не приятных момента с этой кнопкой
1. Если при наведении на кнопку курсор попадёт на пустую область под кнопкой с вращающейся частью, то анимация слайда вправо заглючит
2. После наведения на кнопку справа от неё остаться большая пустая область в которой курсор считается над кнопкой из-за спана
Всё очень круто) Спасибо большое за такие интересные решения. Только можно, пожалуйста, шрифт кода немного побольше делать? А так всё супер)
Ок, учту! Спасибо
Почему текст не перекрывает красные рамки? При том что и у текста, и у псевдоэлемента слева ( который перекрывает) z-index 2
Ваааааааааааауууууууууу
Это да 😊
😚 наверное раз 20 пересмотрю, что бы понять.
Запишу в тетрадь 😂, а потом сотворю.
Все как в школе - 20лет назад, только тогда учиться не хотелось.
Спасибо!
Привет! Благодарю за такой прикольный лайфхак!
и вспомнил, что как-то возник вопрос, можешь объяснить?- почему SASS не знает CSS transition ?
👍
Спасибо!
У меня немного не получилось красного барьера нет и ещё когда я навожу на эту кнопку надпись пропадает. Я не знаю что не так я проверил всё несколько раз и всё тоже самое. Или просто я немного слеповат и что то не заметил.
P.S Уже всё исправил.
А как добавить красивые кнопки в шапку сайта? Спасибо!
👀
😅👍
Отличный урок. Но хотелось бы узнать по подробней, о всех свойствах и уметь самому создавать подобные или свои кнопки.
Спасибо! Все будет в продолжении курса по верстке.
Мужык крут! ЖЕлаю к аналу побольше подпищикав и успех! Спс за контэнт!
Спасибо большое!
Можете оставить css код из видео?
Женя а вот ещё один вопрос, всё что ты росказываешь, ето росказывають в коледже ?
Думаю что нет)
Женя привет, я хотел спросить, мне 14 лет, и я хочу пойти учиться на IT, но при этом знания Анлг языка не очень. Что ты скажешь?
Скажу что у меня тоже не очень)) В процессе обучения подтянешь!
Привет!
Там не было видно, что было написано сверху до четвертой строки, можешь подсказать?
Тут можно глянуть ruclips.net/video/w00Z5y8jEjk/видео.html
Як завжди все класно.
Намагався повторити код, але через стартовий шаблон і в кінці "незакрутилася" анімація. Можливо у шаблоні є якийсь конфлікт класів ?
Треба дивитись що там..
@@FreelancerLifeStyle ОК, зрозумів, буду шукати
мне кажется можно было сделать проще через транслэйт трансформY тоесть мы бы создали новый элемент (квадратик) сделали его с красной границей повернули бы по оси Y на 2 градуса и получили бы тоже самое мне кажется через бифор и афтер както сложновато
сделал тоже самое но без использования псевдоклассов получилось гораздо короче и по моему мнению понятнее особенно тот момент с фокусом это вроде и прикольно, но всегда помнить о том , что у меня есть серый бефор за который я могу случайно выйти и будут видны красные бортики ._. сложновато а тут максимально просто
.button {
position: relative;
margin: 10% auto;
width: 200px;
text-align: center;
padding: 20px;
background-color: rgb(200, 200, 200);
perspective: 500px;
transform-style: preserve-3d;
}
.button__boarder {
position: absolute;
left: 50%;
top: 50%;
width: 40%;
background-color: transparent;
transform: translate(-50%, -50%) rotateY(-1deg);
}
.button__board{
left: 50%;
top: 50%;
width: 100%;
height: 100%;
border: 5px solid red;
animation: rotate 4s infinite linear;
}
.button__text {
display: inline;
}
@keyframes rotate {
0% {
transform: rotateZ(0deg) ;
}
100% {
transform: rotateZ(360deg) ;
}
}
ggWp
button__board.style.height = button__board.clientWidth + 10 + "px"
Спасибо, как всегда идеально.
Вопрос не в тему, но как ты относишься к высшему образованию сейчас? Интересно твоё мнение
Если есть возможность, то лучше его получить!
Где в сети посоветуешь взять интересные макеты для практики?
Тут можно глянуть psd-html-css.ru/shablony/psd-shablony-saytov
Привет , будет ли видео про быструю печать на клавиатуре ?
Ведь это одна из важных вещей для быстрого выполнения заказа .
Будет про комплекс действий для быстрого выполнения заказа
@@FreelancerLifeStyle спасибо
Жду от тебя поскорее информацию про адаптивность. Сверстал уже парочку лендингов на флекс боксах, но они адекватно отображаются только на пэка :((
Все будет!
Привет, раз речь пошла про анимацию, очень часто вижу такие сайты (пример: www.templatemonsterpreview.com/ua/demo/89122.html), когда заходишь на страницу блоков ниже как бы нет, но когда начинаешь пролистывать вниз, они начинают проявляться как буд-то пользователь активировал какой-то тригер, если будет возможность мог бы рассказать об этом?
Да, без проблем
Жень ответь пожалуйста или если не сложно запиши видео
Как защитить свою работу(верстку)? Тоисть как продемонстрировать заказчику работу чтобы он не смог просто во время демонстрации на моем хостинге ее скачать?
У меня просто было 2 случая когда я готовую верстку закинул к себе на хостинг - чтобы продемонстрировать работу заказчику, и в итоге он просто её выкачал и мне не заплатил:(
Как быть в таких случаях?
Буду очень рад если ответиш:)
А видео у тебя просто бомба, продолжай в том-же духе
Пересмотрел почти все твои видосы, очень полезные)
Спасибо! На все 100% не защитишь, но есть пару моментов которые затруднят воровство. Сниму видос.
Первое что на ум пришло, брать предоплату. Хотя бы что то заработаешь.
я когда фрилансил для студентов, делал две версии документа - .pdf и .doc. первый отправлял для ознакомления, а второй после полной оплаты работы. здесь можно что то подобное придумать)
Жека! Что-то мне кажется что это верхушка айсберга всех твоих знаний? )))
Мне есть чем еще поделиться ;)
Запили рубрику с JavaScript как сделать игру например ха 5 уроков, зайдёт 100%
Первый!
Во всем! 💪
Супер! Сколько лет от нуля Вы в этой сфере?
Спасибо! 12
@@FreelancerLifeStyle и как по Вашему мнению: не поздно ли окунаться в эту сферу и начать свой долгий путь будучи уже под 40?
гений
Где найти можно этот резултать у меня не получается..
Скинуть код?
@@paradox_1337 да если можно..
Женя прив, очень бы хотелось услышать твою историю в становлении "гуру" IT, что скажешь? Сможешь как-нибудь организовать такое?
Уже есть вот такой видос, думаю будет что-то еще ruclips.net/video/afRm1BF6QCU/видео.html
У меня не получается сделать такую кнопку :(. Пожалуйста скиньте код, у кого получилось
Жень Подскажи мне ничего не получается что же мне делать
Пробовать еще
@@FreelancerLifeStyle я понял свою ошибку оказывается что я написал содержимое тега не внутри тега а сразу же возле класса button
Видоса уже неделю нет(((
Верно, много дел оффлайн) Все будет
Сначала не понял зачем два псевдо-элемента по краям раскиданы, а затем кааааак понял
Я один не розумію як це все писати на Sass?
Как делается такое alexshag.000webhostapp.com/?