Text Link applying decoration within a flex

I have a button set up like this:

<a href="*LINK*"><button type="submit" class="output loadclass"><img class="btnicon loadclass" src="/assets/thumb.png"><span class="btntext">YouTube</span></button></a>

After applying styles, it looks something like
this.

However, when I apply display: flex to the button it functions as intended, but it shows the underline on the text.

I’ve tried setting text-decoration to none but it’s still showing up, any idea why?

>Solution :

It seems like something got mixed up in your style. Actually, it should work quite easily and flex definitely has no effect on the anchor style within a flex container. Example below:

.flex {
  display: flex;  
  align-items: center;
  border: 1px solid #000;
  border-radius:20px;
  width: 300px;
  margin:auto;
  gap:10px;
}

.flex a {
  text-decoration: none;
}
.flex img {
  border-radius:20px 0px 0px 20px;
}

<div>
  <div class="flex">
    <img src="https://via.placeholder.com/200">
    <a href="">link</a>
  </div>
</div>