.cyberforge-cyberbutton {
    display: inline-block;
    background-color: #F1EA39;
    width: 150px;
    height: 50px;
    color: white;
    font-size: 14px;
    text-align: center;
    border: none;
    cursor: pointer;
    clip-path: polygon(10% 0%, 100% 0%, 100% 80%, 90% 100%, 0% 100%, 0% 20%);
    transition: background-color 0.3s ease;
    color:black;
  }
  
  .cyberforge-cyberbutton:hover {
    background-color: #2980b9; /* Darker shade for hover effect */
  }
  .cyberforge-cyberbutton::before,
  .cyberforge-cyberbutton::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3498db;
    z-index: -1;
    clip-path: polygon(10% 0%, 100% 0%, 100% 90%, 90% 100%, 0% 100%, 0% 10%);
    transform: translate(-10px, -10px);
    opacity: 0;
    transition: all 0.2s ease;
  }
  
  .cyberforge-cyberbutton:hover::before {
    background-color: #ff1d58; /* Glitch color 1 */
    opacity: 0.8;
    transform: translate(10px, -10px) skew(5deg);
  }
  
  .cyberforge-cyberbutton:hover::after {
    background-color: #00ffff; /* Glitch color 2 */
    opacity: 0.6;
    transform: translate(-10px, 10px) skew(-5deg);
  }
  
  @keyframes glitch {
    0% {
      transform: translate(2px, -2px);
    }
    20% {
      transform: translate(-2px, 2px);
    }
    40% {
      transform: translate(2px, 2px);
    }
    60% {
      transform: translate(-2px, -2px);
    }
    80% {
      transform: translate(1px, -1px);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  
  .cyberforge-cyberbutton:hover {
    animation: glitch 0.2s infinite;
  }