mirror of
https://github.com/ivabus/www
synced 2025-06-08 13:00:25 +03:00
75 lines
1.4 KiB
HTML
75 lines
1.4 KiB
HTML
<div class="play-btn">
|
|
<i class="icon-play-icon"></i>
|
|
</div>
|
|
|
|
<style>
|
|
|
|
.icon-play-icon{
|
|
position: relative !important;
|
|
font-size: 22px;
|
|
left:3px;
|
|
top:3px;
|
|
}
|
|
|
|
.play-btn{
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: #4d4d4d !important;
|
|
border-radius: 60px;
|
|
display: block;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
position: relative;
|
|
}
|
|
|
|
.pulse-ring {
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 100px;
|
|
border: 4px solid #4d4d4d;
|
|
position: absolute;
|
|
top: -50px;
|
|
left: -50px;
|
|
opacity: 0;
|
|
animation: pulsate 2s ease-out;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes pulsate {
|
|
0% { transform: scale(0); opacity: 1; }
|
|
100% { transform: scale(1); opacity: 0; }
|
|
}
|
|
|
|
.play-btn:before {
|
|
content: "";
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 60px;
|
|
border: 4px solid #4d4d4d;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
animation: pulsate 2s ease-out;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.play-btn:after {
|
|
content: "";
|
|
display: block;
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 100px;
|
|
border: 4px solid #4d4d4d;
|
|
position: absolute;
|
|
top: -50px;
|
|
left: -50px;
|
|
animation: pulsate 2s ease-out;
|
|
animation-iteration-count: infinite;
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
</style>
|