.wp-element-button, 
.wp-block-button__link {
  padding: calc(8px + 2px) calc(18px + 2px);
  transition: all .3s;
}

.wp-block-button .wp-block-button__link.is-style-outline, 
.wp-block-button.is-style-outline > .wp-block-button__link {
  border: 2px solid;
  padding: 8px 18px;
}



/*************************  Tertiary Style***************************************/
.wp-block-button .wp-block-button__link.is-style-tertiary, 
.wp-block-button.is-style-tertiary > .wp-block-button__link {
  border-bottom: 2px solid;
  padding-bottom: 8px;
  border-radius: var(--wp--custom--bradius--none);
}

.wp-block-button.is-style-tertiary .wp-block-button__link:not(.has-text-color) {
  color: currentColor
}

.wp-block-button.is-style-tertiary .wp-block-button__link:not(.has-background) {
  background-color: transparent;
  background-image: none
}


/*************************  Ghost Style***************************************/
.wp-block-button.is-style-ghost .wp-block-button__link:not(.has-text-color) {
  color: currentColor
}

.wp-block-button.is-style-ghost .wp-block-button__link:not(.has-background) {
  background-color: transparent;
  background-image: none
}









.wp-block-button:not(.is-style-tertiary, .is-style-ghost) .wp-element-button {
  transition: transform .3s;
  &:hover {
    transform: scale(1.1);
  }

  & span {
    transition: inherit;
    display: inline-flex;
  }

  &:hover span {
    transform: scale(calc(1/1.1));
  }
}









.wp-block-button:not(.is-style-tertiary, .is-style-ghost) {

  .wp-element-button {
    position: relative;
    z-index: 0;
    overflow: hidden;
  }
  
  .wp-element-button:before {
    animation: glowing 10s linear infinite;
    background: linear-gradient(45deg,red,#ff8a00,#a400ff,#ff00c8,red);
    background-size: 400%;
    content: "";
    height: 100%;
    inset-inline-start: 0;
    opacity: 0;
    position: absolute;
    top: 0px;
    transition: opacity .3s ease-in-out;
    width: 100%;
    z-index: -1;
  }
  
  .wp-element-button:active {
    color: #000
  }
  
  .wp-element-button:active:after {
    background: transparent;
  }
  
  .wp-element-button:hover:before {
    opacity: 1;
  }
  
  .wp-element-button:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    inset-inline-start: 0;
    top: 0;
    border-radius: 3px;
  }
}
  
.wp-element-button.is-style-fill:after {
  background-color: var(--wp--preset--color--contrast);
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}
  
  
  
  
  
  
  
  
  
.wp-block-button.is-style-tertiary > a.wp-element-button {
  border: none;
  position: relative;
  overflow: hidden;
  &:before,
  &:after {
    background: currentColor;
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    inset-inline-start: 0;
  }
  &:before {
    inset-inline-start: 80%;
    rotate: 45deg;
    .rtl & {
      rotate: -45deg;
    }
    top: 5px;
    transition: all .3s ease-in-out;
    width: 14px;
    opacity: 0;
  }
  &:after {
    bottom: 0;   
    height: 2px; 
    transition: all .5s;
  }

  span:after {
    background: currentColor;
    content: "";
    display: block;
    height: 2px;
    inset-inline-end: 14px;
    position: absolute;
    rotate: -45deg;
    .rtl & {
      rotate: 45deg;
    }
    top: 34px;
    transition: all .3s ease-in-out;
    width: 10px;
    opacity: 0;
  }

  &:hover {
    padding-inline-end: 20px !important;
    &:before,
    &:after {
      inset-inline-start: calc(100% - 12px);     
      opacity: 1; 
    }
    &:before {
      top: calc(50% - 2px);
      width: 10px;
    }
    &:after {
      height: 2px;
      inset-inline-end: 0;
      opacity: 0;
      width: 0;
      inset-inline-start: unset;
    }
    span:after {
      inset-inline-end: 2.374px;
      top: calc(50% + 4.25px);
      opacity: 1;
    }
  }

}