Wed Jul 27 2022
Play Button with Pulse Effect
CSS9985 views
File Name: play-button-with-pulse-effect.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Play Button with Pulse Effect</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #292929;
}
section {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
a.playBtn {
width: 80px;
height: 80px;
background-color: #e1434b;
border-radius: 100%;
border: #fff solid 2px;
position: relative;
animation: shadowPulse 1s infinite linear;
}
a.playBtn::before {
position: absolute;
content: '';
border-top: transparent 15px solid;
border-bottom: transparent 15px solid;
border-left: #fff 25px solid;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
}
a.playBtn::after {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
border: #fff solid 2px;
border-radius: 100%;
animation: ringPulse 1s infinite linear;
}
@keyframes ringPulse {
0% {
opacity: 0;
transform: scale(0.95);
}
10% {
opacity: 1;
}
80%, 100% {
opacity: 0;
transform: scale(2);
}
}
@keyframes shadowPulse {
0% {
box-shadow: 0 0 8px 6px transparent,
0 0 0 0 transparent,
0 0 0 0 transparent;
}
10% {
box-shadow: 0 0 8px 6px #e1434b,
0 0 12px 10px transparent,
0 0 12px 5px #e1434b;
}
80%, 100% {
box-shadow: 0 0 8px 6px transparent,
0 0 0 40px transparent,
0 0 0 40px transparent;
}
}
</style>
</head>
<body>
<section>
<a href="" class="playBtn"></a>
</section>
</body>
</html>
Result Screenshot(s)
Author:Geekboots