leuchtender Knopf 2

Im Editor öffnen Veröffentlichen Sie Ihren Code Brauchen Sie eine Website?

Empfohlen

26 April 2025

* {
      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;
      }
    }

leuchtender Knopf 2

Empfohlen

Ein Code von shasshan7236

Ein Code von robustvariable23

Ein Code von Valcor27

HTML

CSS

JS

Empfohlen

Ein Code von shasshan7236

Ein Code von robustvariable23

Ein Code von Valcor27

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS