Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Sep 7, 2016
Embed
What would you like to do?
Pulsating Hotspot UI Element
<section class="btn-pulse">
<span class="ring"></span>
<span class="circle"></span>
</section>
<!-- img by unsplash.com -->
<img src="https://ununsplash.imgix.net/photo-1416339306562-f3d12fefd36f?fit=crop&fm=jpg&h=600&q=75&w=800" alt="" />

Pulsating Hotspot UI Element

Animated hotspot indicator element with pure HTML & CSS. Uses CSS3 keyframe animation.

A Pen by Matthias Ott on CodePen.

License.

* {
box-sizing:border-box;
}
/* Animation */
@keyframes pulsate {
0% {
transform: scale(1);
opacity:0.8;
}
45% {
transform: scale(1.75);
opacity:0;
}
}
@keyframes stop-pulsate {
from {
opacity:0.4;
}
to {
transform: scale(2);
opacity:0;
}
}
/* Button */
.btn-pulse {
position:absolute;
top:195px;
left:190px;
.circle {
position:absolute;
left:50%;
top:50%;
width:32px;
height:32px;
margin: -0.666em auto auto -0.666em;
background:rgb(223, 0, 36);
border-radius:50%;
opacity:0.6;
transform-origin: 50% 50%;
transition:opacity .2s ease-in, transform .1s ease-out;
color:white;
font-size:1.5em;
padding:0;
text-align:center;
line-height:32px;
overflow:hidden;
&:hover {
opacity:0.8;
cursor:pointer;
}
&:active {
transform:scale(0.875);
}
}
.ring {
display:block;
position:absolute;
top:50%;
left:50%;
width:2em;
height:2em;
margin:-1em auto auto -1em;
transform-origin: 50% 50%;
border-radius:50%;
border:1px solid rgb(255, 0, 36);
opacity:0;
animation: pulsate 3s ease-out infinite;
}
&:hover .ring {
animation: none;
}
&:active .ring {
animation: stop-pulsate 0.3s;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment