Bad css design3

bad.css

#blog-post a.button {
  display:inline-block;
  padding: 0.5rem 1rem;
  background-color: #007bff;
  color: white;
  font-weight:bold;
  text-decoration:none;
  border-radius: 4px;
}

#blog-archives a.button{
  display:inline-block;
  padding: 0.5rem 1rem;
  background-color: red;
  color: white;
  font-weight:bold;
  text-decoration:none;
  border-radius: 4px;
}

blog.html

<div id="blog-post">
  <h2>今日の日記</h2>
  <p>本文本文本文</p>
  <a href="" class="button">続きを読む</a>
</div>

<h2>ブログ一覧</h2>
<div id="blog-archives">
  <h3>昨日の日記</h3>
  <p>本文本文本文...</p>
  <a href="" class="button">続きを読む</a>
  <h3>一昨日の日記</h3>
  <p>本文本文本文...</p>
  <a href="" class="button">続きを読む</a>
</div>