text-decoration: none; not working on button | css [duplicate]

My code isnt working im trying to make a button to a video i have tried text-decoration: none!important; and border-bottom: 0; but nothing seems to work

css

    .btn1 {
      font-family: 'Be Vietnam Pro', sans-serif;
      background-color: rgb(255, 255, 255);
      border: none;
      color: rgb(0, 0, 0);
      padding: 14px 40px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      margin: 4px 2px;
      cursor: pointer;
      font-size: 30px;
      border-radius: 32px;
      background-color: #ffffff;
      border-bottom: 0;
      box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    }
    
    .btn1:hover {
      text-decoration: none;
      box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    }

html

  <button class="btn1" data-aos="zoom-in-up" data-aos-duration="1500" ><a href="https://www.youtube.com">Why us?</a></button>

I would really like some help Thanks

Solution 1:

You have to apply it to the anchor tag, instead of applying it to the button. It should be as such:

.btn1 a {
  text-decoration: none;
}