Значок NEW: Яркий акцент на вашем сайте с магией градиента

Стильный переливающийся значок NEW для вашего сайта. Подробная инструкция с кодом на HTML и CSS поможет добавить яркий акцент, который привлечёт внимание посетителей. Простое, адаптивное и визуально эффектное решение!

See the Pen Значок NEW 3 by SATAMAX.RU (@lvpzgyft-the-typescripter) on CodePen.

        HTML

  
  Показать код HTML
  
    
  <div class="new-badge">NEW</div>

        CSS
 
  
  Показать код CSS
  
         
/* Стиль значка */
.new-badge {
    display: inline-block;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: linear-gradient(45deg, #ff4e50, #f9d423, #42e695, #3bb2b8);
    background-size: 200% 200%;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: gradient-animation 3s ease infinite;
}
 
/* Анимация переливания */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}