В данной статье, я расскажу как сделать обыкновенную пульсирующую кнопку на чистом CSS. Ее можно применить, например, для вызова pop-up окна, разместив где-то в правом нижнем углу сайта, и навесив на нее значок телефонной трубки или письма. Думаю это довольно таки стильно и привлекательно
HTML:
|
1 2 3 |
<div class="wrapper"> <div class="pulse">Click me!</div> </div> |
В место текста «Click me!», вы можете вставить все что угодно. Ссылку, иконку или свой текст.
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
* { margin: 0; padding: 0; } .pulse { display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; color:gray; background: white; border-radius: 50%; animation: radial-pulse 1s infinite; } .wrapper { width: 100%; height: 100vh; background-color: #D04746; display: flex; align-items: center; justify-content: center; } @keyframes radial-pulse { 0% { box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5); } 100% { box-shadow: 0 0 0 40px rgba(0, 0, 0, 0); } } |
Это базовый CSS. Если немного поиграть, вы можете увеличить диаметр пульсации, изменить цвет пульсации, изменить цвет кнопки. В общем, сделать как вашей душе угодно.
Надеюсь данная статья была вам полезна.
Не забудьте подписаться на наш наш telegram-канал и соц.сети, чтобы не пропустить новые статьи и новости 😉
Оставьте ответ