.button-89 {
    --b: 3px;   /* border thickness */
    --s: .45em; /* size of the corner */
    --color: #ffffff;
    
    
    
    padding: calc(.5em + var(--s)) calc(.9em + var(--s));
    color: var(--color);
    --_p: var(--s);
    background:
      conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
      var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
    transition: .3s linear, color 0s, background-color 0s;
    outline: var(--b) solid #0000;
    outline-offset: .4em;
    font-size: 16px;
    font-weight: 500;
  
    border: 0;
  
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  
  .button-89:hover,
  .button-89:focus-visible{
    --_p: 0px;
    outline-color: var(--color);
    outline-offset: .03em;
  }
  
  .button-89:active {
    background: var(--color);
    color: #1184e2;
    font-weight: 700;
  }
  @media only screen and (max-width: 900px) and (orientation: landscape) {
    .button-89 {
      font-size: 13px;
      font-weight: 500;
    
    
  }
}
@media only screen and (min-width: 632px) and (max-width: 1280px) and (orientation: portrait) {
  .button-89 {
    font-size: 13px;
    font-weight: 500;
}
}