Ein Code von mironovbogdan341

Im Editor öffnen Veröffentlichen Sie Ihren Code Brauchen Sie eine Website?

Empfohlen

2 March 2025

Eine mit Verzeichnissen erstellte Homepage

6 December 2024

<!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>

Ein Code von mironovbogdan341

Empfohlen

Ein Code von Mr. Duck

Eine mit Verzeichnissen erstellte Homepage

Ein Code von dynamicarray606

HTML

CSS

JS

Empfohlen

Ein Code von Mr. Duck

Eine mit Verzeichnissen erstellte Homepage

Ein Code von dynamicarray606

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS