<section>
  <div class="container">
    <div class="button--pulsing"></div>
  </div>
</section>
body {
  margin: 0;
  background-color: #0065c4;
}

section {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

.container {
  align-self: center;
}

.button--pulsing {
	width: 20px;
	height: 20px;
	background-color: rgb(255,199,44);
	border-radius: 50%;

	&:after {
		content: "";
		width: 20px;
		height: 20px;
		position: absolute;
		transform: scale(1, 1);
		border-radius: 50%;
		background-color: rgb(255,199,44);
		opacity: 1;
		animation: pulsing 1500ms infinite;
	}
}

// http://tobiasahlin.com/blog/how-to-animate-box-shadow/
// Do not use box shadow for animation
@keyframes pulsing {
	0% {
		transform: scale(1, 1);
		opacity: 1;
	}
	50% {
		transform: scale(1.5, 1.5);
		opacity: 0.5;
	}
	70% {
		transform: scale(1.7, 1.7);
		opacity: 0.25;
	}
	100% {
		opacity: 0;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.