Mironovbogdan341 द्वारा एक कोड

अनुशंसित

10 June 2025

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Центрированная RGB-переливающаяся кнопка</title>
<style>
  /* Центрируем весь контент */
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Высота всей видимой части окна */
    margin: 0;
    background-color: #f0f0f0; /* Можно добавить фон для красоты */
  }

/* Создаем плавную анимацию с плавным переходом через цвета RGB */
  @keyframes rainbow {
    0% { background-color: rgb(255, 0, 0); }
    16.66% { background-color: rgb(255, 255, 0); }
    33.33% { background-color: rgb(0, 255, 0); }
    50% { background-color: rgb(0, 255, 255); }
    66.66% { background-color: rgb(0, 0, 255); }
    83.33% { background-color: rgb(255, 0, 255); }
    100% { background-color: rgb(255, 0, 0); }
  }

/* Стиль кнопки с эффектами и анимацией */
  .rainbow-button {
    padding: 15px 40px;
    font-size: 18px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    background-color: rgb(255, 0, 0);
    animation: rainbow 8s linear infinite;
    transition: background-color 0.3s, transform 0.2s;
  }

/* Эффект при наведении */
  .rainbow-button:hover {
    opacity: 0.85;
    transform: scale(1.05);
  }
</style>
</head>
<body>

<button class="rainbow-button">Плывущая RGB-кнопка</button>

</body>
</html>

Mironovbogdan341 द्वारा एक कोड

अनुशंसित

मेटे का एक कोड

लॉजिकलकोड2 द्वारा एक कोड

HTML कोड प्लेसहोल्डर टिप्पणी

HTML

CSS

JS

अनुशंसित

मेटे का एक कोड

लॉजिकलकोड2 द्वारा एक कोड

HTML कोड प्लेसहोल्डर टिप्पणी

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS