bouton lumineux 2

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

9 December 2024

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: black;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-family: 'Playfair Display', serif;
    }
    /* botão com box-shadow */
    .glowing-btn-2 {
      color: #f1f5f9;
      background: transparent;
      height: 10%;
      width: 15%;
      max-height: 200px;
      max-width: 300px;
      border-radius: 20px;
      border: solid 2px #8400ff;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      font-size: 1.2rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1px;
      box-shadow: 0 0 15px rgba(168, 85, 247, 0.4), 0 0 30px rgba(168, 85, 247, 0.2);
      transition: box-shadow 0.3s ease;
    }
    .glowing-btn-2:hover {
      box-shadow: 0 0 20px rgba(132, 0, 255, 0.6), 0 0 40px rgba(168, 85, 247, 0.3);
    }
    /* after com tamanho inicial de 0 e centralizado */
    .glowing-btn-2:active::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      border-radius: 20px;
      width: 0;
      height: 0;
      background: rgba(161, 60, 255, 0.15);
      transform: translate(-50%, -50%);
      animation: rippleEffect 2s ease-out forwards;
    }
    /*animacao para expandir o after começando de height 100% e indo para 200% */
    @keyframes rippleEffect {
      0% {
        width: 0;
        height: 100%;
        opacity: 1;
      }
      100% {
        width: 200%;
        height: 200%;
        opacity: 1;
      }
    }

bouton lumineux 2

Recommandé

Un code par slowlogic992

Bouton Générer

Bouton animé au survol

HTML

CSS

JS

Recommandé

Un code par slowlogic992

Bouton Générer

Bouton animé au survol

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS