
Всем добрый день. В этой статье мы рассмотрим эффект пульсации для кнопки. Например, для привлечения внимания, побуждающее посетителя сайта сделать какое-либо действие.
Будем использовать обычный тег кнопки, внутри которой поместим иконку и текст, например так:
<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>