Loading...

Във форума е въведено ограничение, което позволява на потребителите единствено да разглеждат публикуваните въпроси.

AntonStoychev avatar AntonStoychev 2 Точки

Как да направя анимирани бутони със CSS?

Здравейте,

Имам един въпрос относно това как се правят анимирани бутони чрез CSS. Изкарах курса HTML & CSS, който се проведе през месец септември и октомври тази година, но там не беше засегната тази тема, защото най-вероятно е за по-напреднали, а това беше базов курс. Както и да е… В момента правя фирмен сайт на един приятел, който ми се довери и ми даде да се уча на него J. Обаче искам да блесна и да го направя малко по-разчупен от стандартните темплейти и теми, затова искам да му направя call to action бутоните анимирани с някакви ефекти като „подскачане“ или „пулсиране“ на определени интервали от време като това нещо се повтаря постоянно. Не знам дали става ясно, но като пример можете да видите как са направени бутоните в този сайт, където пише бонуси. Бихте ли ме помогнали и споделили по какъв начин се правят тези ефекти или да ме насочите към някакви информационни ресурси с примери, където мога да прочета повече. Предварително се извинявам, ако въпросът ми се стори „тъп“ за някой, но в момента все още се уча и всякаква помощ би ми била полезна. Не ме мързи да чета и искам да науча всички тънкости, който предлага CSS и да ги използвам, но конкретно с този ефект удрям на камък и не знам какво да търся като информация, за да мога реализирам.

Поздрави,

Антон

Тагове:
1
Module: Front-End
willystyle avatar willystyle 2472 Точки
Best Answer

Като ти хареса някой ефект, можеш да инспектираш елемента и да му вземеш css.

За случая на пулсиращи бутони: https://jsfiddle.net/willystyle/4hgkavo0/8/

 

0
AntonStoychev avatar AntonStoychev 2 Точки

Благодаря за съдействието.

По принцип знам как да инспектирам елементите, но това не знаех как се прави. Сега научих, че подобни неща се „раздвижват“ чрез @keyframes и започнах да ги разучавам в W3School. Иначе с другите фрагменти от кода успях да се справя, но тези @keyframes ми убягваха, а реално подобни ефекти се правят чрез тях.

1
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.