Pulsante Hover Bagliore

1250 securearray418

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

30 September 2025

Animazione CSS Sphere con effetti hover

22 November 2025

Effetto passaggio del mouse sul pulsante CSS Liquid Glass

12 July 2025

Effetto bagliore della scheda 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;
  }

Consigliato

Animazione CSS Sphere con effetti hover

Effetto passaggio del mouse sul pulsante CSS Liquid Glass

Effetto bagliore della scheda CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS