Botão Hover Glow

Abrir no Editor Video Publique Seu Código

Recomendado

19 March 2025

Animação Sxrgxx da interface do usuário do botão CSS

HTML

CSS

html, body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #161616;
    overflow: hidden;
    transform: scale(1.5);
  }

.btn {
    margin: 100px;
    padding: 15px 40px;
    border: none;
    outline: none;
    color: #FFF;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 12px;
  }
  .btn::after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #333;
    left: 0;
    top: 0;
    border-radius: 10px;
  }

.btn::before {
    content: "";
    background: linear-gradient(
      45deg,
      #FF0000, #FF7300, #FFFB00, #48FF00,
      #00FFD5, #002BFF, #FF00C8, #FF0000
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 600%;
    z-index: -1;
    width: calc(100% + 4px);
    height:  calc(100% + 4px);
    filter: blur(8px);
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
    opacity: 0;
  }
  
  @keyframes glowing {
    0% {background-position: 0 0;}
    50% {background-position: 400% 0;}
    100% {background-position: 0 0;}
  }

.btn:hover::before {
    opacity: 1;
  }
  
  .btn:active:after {
    background: transparent;
  }
  
  .btn:active {
    color: #000;
    font-weight: bold;
  }

Botão Hover Glow

Recomendado

Botão de confete

Botão Hover

Animação Sxrgxx da interface do usuário do botão CSS

HTML

CSS

JS

Recomendado

Botão de confete

Botão Hover

Animação Sxrgxx da interface do usuário do botão CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS