writing-mode: vertical-lr; がbuttonタグにだけ効かない。。。

プログラミング超初心者です。
サイト模写をしており、全てを縦書きにしたいのですが、ボタンタグにだけwriting-mode: vertical-lr;が効かず、困っています。
どなたか縦にする方法ご存知でしたら教えてくださいm(_ _)m
HTMLのコード

    <header>
        <h1>創作</h1>
        <ul>
            <li><a href="#">お知らせ</a></li>
            <li><a href="#">商品のご紹介</a></li>
            <li><a href="#">店舗の案内</a></li>
        </ul>
        <button>オンラインストアを見る</button>
    </header>
</body>
</html>


```CSSのコード
header{
  background-image: url(/Users/ayaendo/Downloads/wagashi.jpeg);
  background-size: cover;
  background-position: center;
  height: 900px;
}
header h1{
  writing-mode: vertical-rl;
  font-size: 80px;
  float: right;
  font-family: serif;
  color:white;
  margin-top: 20px;
}
li {
  list-style: none;
  float: right;
  margin-top: 20px;
  margin-right: 10px;
  
}
li a{
  color:white;
  font-size:30px;
  writing-mode: vertical-rl;
  text-decoration: none;
  font-family: serif;
  padding-right: 20px;}

button{
  writing-mode: vertical-rl;
  width: 350px;
  padding-top : 15px;
  padding-bottom: 15px;
  font-size: 20px;
  margin-top: 800px;
  }