CSS: Эффект пульсации для кнопки

Всем добрый день. В этой статье мы рассмотрим эффект пульсации для кнопки. Например, для привлечения внимания, побуждающее посетителя сайта сделать какое-либо действие.

Будем использовать обычный тег кнопки, внутри которой поместим иконку и текст, например так:

<button>
	<span><i class="fas fa-thumbs-up"></i></span>
	<span id="like">Like</span>
</button>

Добавим стили к кнопке и содержимому:

button{
	display: block;
	margin: 0 auto;
	background-color: orange;
	border: none;
	padding: 15px 25px;
	cursor: pointer;
	border-radius: 5px;
}
button span{
	color: white;
	font-size: 30px;
	letter-spacing: 10px;
}
#like{
	padding-left: 10px;
	text-transform: uppercase;
}

Иконку используем из библиотеки FontAwesome, которую необходимо подключить с помощью добавления ссылки в заголовке, например, используем cdn:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">

Для того чтобы наша копка начала пульсировать мы применим широко распространенную библиотеку animate.css:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

Для кнопки добавим классы:

animate__animated — включаем анимацию

animate__pulse — включаем эффект пульсации

animate__infinite — включаем бесконечное повторение эффекта

<button class="animate__animated animate__pulse animate__infinite">
	<span><i class="fas fa-thumbs-up"></i></span>
	<span id="like">Like</span>
</button>