A Code by mironovbogdan341

Open In Editor Publish Your Code

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

A Code by mironovbogdan341

Recommended

Bootstrap Responsive Register Form

Para un spa

Stylish CSS Button with Animated Text and Icon

HTML

CSS

JS

Recommended

Bootstrap Responsive Register Form

Para un spa

Stylish CSS Button with Animated Text and Icon

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS