.btn::after {
    content: '';
    position: absolute;
    height: 200px;
    width: 200px;
   background: radial-gradient(circle, var(--color3), transparent, transparent);
   
    /* padding: 50%; */
    left: calc(var(--x) - 100px);
    top: calc(var(--y) - 100px);
      z-index: -1;
}

.btn::before {
  content: '';
  position: absolute;
  
  inset: 0;
  border-radius: 0px; 
  padding: 10px; 
  border-image: radial-gradient(43% 92% at var(--x) var(--y), var(--color4) 42%, transparent 98%) 1 / 6px / 5px stretch ;
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude; 
}

.btn.darkbtn::after {
   background: radial-gradient(circle, rgba(255, 255, 255, 60%), transparent, transparent);
   
}


.btn.darkbtn::before {
    border-image: radial-gradient(43% 92% at var(--x) var(--y), rgba(255, 255, 255, 1) 42%, transparent 98%) 1 / 6px / 5px stretch ;
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
}

.btn{
  overflow: hidden ;
  position: relative;
  border-radius:0px
 
}
.btn.focus, .btn:focus {
    box-shadow: none !important;
    border: none !important;
}
/**/