E-Learning
Button Effect Stylish Button 
				
					<button class="btn-hover-border">Button</button>

				
			
				
					.btn-hover-border {
  --b: 3px;   /* border thickness */
  --s: .45em; /* size of the corner */
  --color: 
#373B44;
  
  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: .6em;
  font-size: 16px;

  border: 0;

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.btn-hover-border:hover,
.btn-hover-border:focus-visible{
  --_p: 0px;
  outline-color: var(--color);
  outline-offset: .05em;
}

.btn-hover-border:active {
  background: var(--color);
  color: 
#fff;
}