Trying to center a button with CSS. However, whenever I use display: block and margin: 0 auto; I get text decoration under the button text. 

```
.app-download .btn {
   display: block;
   margin: 0 auto;
   text-decoration: none;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
   font-family: "News Cycle", sans-serif;
   font-size: 1.5em;
   border-radius: 5px;
   color: #ffffff;
   background: steelblue;
   width: 400px;
   padding: 20px 0;

}
.app-download .btn:hover {
  background: tomato;
  text-decoration: none;
}

```

MY HTML

```
<div class="app-download">
    <div class="container">
          <a href="#"><button type="button" class="btn">Download for iPhone</button></a>
          <a href="#"><button type="button" class="btn">Download for Android</button></a>
    </div>
</div>

```

How can I center the button without getting a text decoration underneath?