<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;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.