Ein Code von mironovbogdan341

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

5 June 2025

Ein Code von mamadoudiallo34204

27 June 2025

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Кнопка RGB переливается</title>
<style>
  /*Общий стиль для тела страницы */
  body {
    display: flex;
    justify-content: center;
    align-items:center;
    height: 100vh;
    background-color: #222;
    margin: 0;
    font-family: Artial, sans-serif;
   /* Стиль для кнопки */
  .rainbow-button {
    padding: 15px 40px;
    font-size: 20px;
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    background: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet);
    background-size: 1400% 1400%;
    animation: rainbow 8s ease-in-out infinite;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.2s; box-shadow 0.2s;
  }

/* Эффект при наведении */
  .rainbow-button:hover {
    transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4)
  }

/* Анимация градиента */
  @keyframes rainbow {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
</style>
</head>
<body>

<button class="rainbow-button">РГБ кнопка</button>

</body>
</html>

Ein Code von mironovbogdan341

Empfohlen

Ein Code von alejandrokundrah

Ein Code von mamadoudiallo34204

Ein Code von Mete

HTML

CSS

JS

Empfohlen

Ein Code von alejandrokundrah

Ein Code von mamadoudiallo34204

Ein Code von Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS