Html
<a class="button-animate" href="#"> <span></span> <a class="button-animate-second" href="#"> <a class="button-animate-third" href="#"> </a>
Css
body { background-color: skyblue; } .button-animate { position: absolute; z-index: 10; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); box-sizing: content-box; display: block; width: 32px; height: 44px; /* background: #fa183d; */ border-radius: 50%; padding: 18px 20px 18px 28px; } .button-animate:before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 80px; height: 80px; background: #fff; border-radius: 50%; -webkit-animation: pulse-border 2s infinite; animation: pulse-border 2s infinite; } .button-animate-second::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 100px; height: 100px; background: #fff; border-radius: 50%; -webkit-animation: pulse-border 2.5s infinite; animation: pulse-border 2.5s infinite; } .button-animate-third::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 120px; height: 120px; background: #fff; border-radius: 50%; -webkit-animation: pulse-border 3s infinite; animation: pulse-border 3s infinite; } .button-animate:after { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 80px; height: 80px; background: #fff; border-radius: 50%; transition: all 200ms; } .button-animate:hover:after { background-color: #dbdbdb; } .button-animate span { display: block; position: relative; z-index: 3; width: 0; height: 0; border-left: 32px solid #000; border-top: 22px solid transparent; border-bottom: 22px solid transparent; } @-webkit-keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } }