This code is applicable to Invision Community/XenForo

<div class="announcement-wrapper">
    <a href="https://okstar.cc/articles.html/1_articles/rules-for-downloading-files-r1/" 
       class="announcement-link">
        <i class="fa fa-bullhorn fa-bounce" aria-hidden="true"></i>
        Announcement: Rules for Downloading Files
    </a>
</div>

<style>
.announcement-link {
    display: inline-flex; /* Align text and icon side by side */
    align-items: center;
    justify-content: center; /* Center the icon and text */
    width: 100%; /* Make the width consistent with the parent container */
    padding: 12px 25px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: white;
    border-radius: 8px;
    background: linear-gradient(45deg, #ff6b6b, #ffcc5c, #4ecdc4, #8a2be2, #f39c12);
    background-size: 400% 400%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.6); /* Multiple shadow effects */
    transition: background-position 1s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
    
    /* Text shadow */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}

.announcement-link .fa {
    margin-right: 10px; /* Space between icon and text */
    font-size: 22px; /* Icon size */
    transition: transform 0.2s ease;
    
    /* Set the icon color to red and add black shadow */
    color: red; /* Icon color is red */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

/* Hover effect */
.announcement-link:hover {
    background-position: 100% 0;
    transform: scale(1.05); /* Zoom in on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.8); /* Enhanced shadow effect */
}

.announcement-link:hover .fa {
    transform: rotate(360deg); /* Rotate icon on hover */
}
</style>

DEMO

Update style code