HTML Button hover animation fail

Beaver Builder
1

So I have created Button via HTML code with CSS hover styling. Everything works BUT when I hover over the button the default bun comes up in the background of hover like so :

How it ends up loking:
Screenshot 2023-06-29 at 07.57.19
The Background on hover should be see trough not blue !!!

CSS:

button {
  color: #2e276d;
  text-decoration: none;
  font-size: 20px;
  border: none;
  background: none;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

button::before {
  margin-left: auto;
}

button::after, button::before {
  content: '';
  width: 0%;
  height: 2px;
  background: #f44336;
  display: block;
  transition: 0.5s;
}

button:hover::after, button:hover::before {
  width: 100%;
}

Can someone PLEASE PLEASE HELP ???!!!

2

Hi Agata, can you share a temporary link or share the non-hover state, then the hover state?

3

Hello, sorry I’ve figured it out, I just had to use the html as “not a button” and then it worked and the default button stopped appearing underneath :smiling_face: