press_highlight.html

<style>
	body {
		background-color: #ccc;
	}
	.highlight_ring {
		border: 9px solid #fff;
		box-shadow: 0px 0px 5px #fff, inset 0px 0px 2px #fff;
		       -border-radius: 34px;
		-webkit-border-radius: 34px;
		height: 48px;
		width: 48px;
		position: absolute;
		left:100px;
		top:100px;
		       -animation: pulsate 1.6s linear;
		    -ms-animation: pulsate 1.6s linear;
		-webkit-animation: pulsate 1.6s linear;
			   -animation-iteration-count: infinite;
		    -ms-animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
		opacity: 0.0
	}
	.highlight_ring div {
		border: 3px solid #fa0012;
		height: 54px;
		width: 54px;
		margin-left: -6px;
		margin-top: -6px;
		-webkit-border-radius: 30px;
	}
	@-webkit-keyframes pulsate {
		0% {
			       -transform: scale(0.8, 0.8); opacity: 0.2;
			    -ms-transform: scale(0.8, 0.8); opacity: 0.2;
			-webkit-transform: scale(0.8, 0.8); opacity: 0.2;
		}
		70% {
				   -transform: scale(1.2, 1.2); opacity: 1.0;
			    -ms-transform: scale(1.2, 1.2); opacity: 1.0;
			-webkit-transform: scale(1.2, 1.2); opacity: 1.0;
		}
		100% {
				   -transform: cale(0.8, 0.8); opacity: 0.2;
				-ms-transform: cale(0.8, 0.8); opacity: 0.2;
			-webkit-transform: scale(0.8, 0.8); opacity: 0.2;
		}
	}
</style>


<div class="highlight_ring">
	<div></div>
</div>