Geovani Assis

The pulsation is very good to be able to draw attention to some specific item, like a button. On this page in the lower right corner we gave a demonstration of how it works.

To achieve this, we will use the following codes:

HTML

<a class="buttom-whats"></a>

CSS

<style type="text/css">
	.buttom-whats{
		position:fixed;
		width:60px;
		height:60px;
		bottom:40px;
		right:40px;
		background-color:#25d366;
		color:#FFF;
		border-radius:50px;
		text-align:center;
		font-size:30px;
		box-shadow: 1px 1px 2px #888;
		z-index:1000;
	}

	.buttom-whats::after {
		content: '';
		width: 30px;
		height: 30px;
		border-radius: 100%;
		border: 6px solid #9C27B0;
		position: absolute;
		z-index: -1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		animation: ring 1.5s infinite;
	}

	@keyframes ring {
		0% {
			width: 30px;
			height: 30px;
			opacity: 1;
		}

		100% {
			width: 100px;
			height: 100px;
			opacity: 0;
		}
	}
</style>