<h1>Pulse Effect</h1>
<div class="menu">
<a href="http://www.josuaowebblog.fr" target="_blank" class="bt1">pulse</a>
</div>
body{font-family:sans-serif;padding:30px; background:#333; font-size:35px; }
h1{color:#fff; font-size:17px;display:block;}
.menu{display:flex; justify-content: center;}
.bt1{
border-radius:50%;
text-decoration:none;
background: #777;
color:#fff;
display:block;
width:150px;
height:150px;
line-height:150px;
text-align:center;
box-shadow: 0px 0px 0 0px #fff, 0px 0px 0 0px #555a86 ;
transition : linear 0.3s;
}
.bt1:hover {background:rgb(54, 60, 86);
animation: pulse 0.8s infinite alternate}
@keyframes pulse {
0%{
box-shadow: 0px 0px 0 1px #333, 0px 0px 0 4px #555a86 ;
opacity :1;
}100%{
box-shadow: 0px 0px 0 6px #333, 0px 0px 0 8px #555a86;
opacity :0.9;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.