email type inputs don't really need an explicit pattern as they are validated by most modern browsers. However, the rules might not be to your liking. For example: the at least 2 characters after the trailing dot {2,} is not a requirement on Firefox at least. In such cases you might use the pattern attr.

Your pattern is slightly wrong in that you have not escaped the literal -. This leads the pattern analyzer astray. I have added the necessary escapes in my snippet and it seems to work as expected.

Cheers

input {
  display: block;
  margin-bottom: 0.5rem;
}

input:invalid {
  background-color: ivory;
  border: transparent;
  outline: 2px solid red;
}

<form>
  <input type="email" required placeholder="no pattern email" />
  <input type="email" required pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$" placeholder="pattern email" />
  <input type="password" required minlength="8" placeholder="password"/>
  <button type="submit">Register</button>
</form>