Message Icon

<div class="message-wrapper">

    <a href="#" class="message-icon" aria-label="Messages">
        <span class="chat-bubble">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </span>

        <span class="notification-badge">
            <?php echo $unread_messages; ?>
        </span>
    </a>

</div>

.message-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.message-icon {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    /* Purple → Pink ring */
    border: 5px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #7b00ff, #ff00a8) border-box;

    transition: transform 0.25s ease;
}

.message-icon:hover {
    transform: scale(1.06);
}

/* Chat bubble */
.chat-bubble {
    width: 42px;
    height: 32px;
    border: 5px solid #171b25;
    border-radius: 13px;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Speech tail */
.chat-bubble::after {
    content: "";
    position: absolute;
    left: -5px;
    bottom: -11px;

    width: 15px;
    height: 15px;

    background: #fff;
    border-left: 5px solid #171b25;
    border-bottom: 5px solid #171b25;

    transform: skewY(-35deg);
}

/* Three dots */
.dot {
    width: 6px;
    height: 6px;
    background: #171b25;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

/* Notification number */
.notification-badge {
    position: absolute;

    top: -14px;
    right: -10px;

    width: 32px;
    height: 32px;

    background: #ff2027;
    color: white;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    border: 3px solid white;

    z-index: 10;
}

<?php

// Example: get unread messages
$unread_messages = 5;

// If there are more than 99 messages
if ($unread_messages > 99) {
    $unread_messages = "99+";
}

?>