A Code by mironovbogdan341

Open In Editor Publish Your Code

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

A Code by mironovbogdan341

Recommended

CSS Loading Animation Snippet

metehan'ın bir kodu

The Walk of Life

HTML

CSS

JS

Recommended

CSS Loading Animation Snippet

metehan'ın bir kodu

The Walk of Life

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS