Text Link applying decoration within a flex

user_18772169 0
Viewed 33

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?

css html
1 Answers

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>

user_148071110
Related