Um Código por mironovbogdan341

Abrir no Editor Video Publique Seu Código

Recomendado

21 October 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>

Um Código por mironovbogdan341

Recomendado

Escaneamento humano

Um Código por Mikeykun

Um código por fastclass383

HTML

CSS

JS

Recomendado

Escaneamento humano

Um Código por Mikeykun

Um código por fastclass383

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS