Using a simple button is not particularly beautiful, but using an animated button is both remarkably beautiful and attracts the audience more attention, such as the following code, which is a notification symbol that protrudes a circle larger than its original radius from the center. And it disappears and the notification icon, which is a ringtone, also shakes.
HTML
<!-- this script got from www.devanswer.com -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'> <div class="my-btn"> <div class="my-btn-border"></div> <i class="fas fa-bell btn-bell"></i> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.devanswer.com">Developer Code</a>

CSS
body {
    height: 100%;
    overflow-x: hidden;
    margin: 0 auto;
}

.my-btn, .my-btn-border, .btn-bell {
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.my-btn {
    height: 60px;
    width: 60px;
    box-shadow: -1px 2px 10px #999;
    background: #ef7575;
    animation-name: col;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.my-btn-border {
    height: 59px;
    width: 59px;
    border: 1px solid #ef7575 !important;
    animation-name: bord-pop;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    box-shadow: 2px 2px 5px #ccc, -2px -2px 5px #ccc;
}

.btn-bell {
    color: white;
    font-size: 20px;
    animation-name: bell-ring;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes bord-pop {
    0% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.9);
        opacity: 0.1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.9);
        opacity: 0;
    }
}

@keyframes col {
    0% {
        transform: scale(1) translate(0,0);
    }

    10% {
        transform: scale(1.1) translate(0,0);
    }

    75% {
        transform: scale(1) translate(0,0);
    }

    100% {
        transform: scale(1) translate(0,0);
    }
}

@keyframes bell-ring {
    0% {
        transform: translate(-50%, -50%);
    }

    5%, 15% {
        transform: translate(-50%, -50%) rotate(25deg);
    }

    10%, 20% {
        transform: translate(-50%, -50%) rotate(-25deg);
    }

    25% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}
Javascript
$(function () {
    // check this out on a mobile device.
    if (/Mobi/.test(navigator.userAgent)) {
        setInterval(function () {
            navigator.vibrate();
        }, 3000);
    }
});