ナビゲーションバーをボタンに置き換え♪

ページトップのナビゲーションバーを
ボタンに変えてみました
もとのページデザイン通り黒縁の丸っこいのがいいかなぁと・・・
Perlの昔から車輪の再発明はよくないと教え込まれているので
基礎的な部分はほぼパクリです

<style>
.btn-area{
  width:90%;
  height:110px;
  margin:0 auto;
  margin-bottom:10px;justify-content: center;
  align-items: center;
  border:0;
 }
.r-btn {
  cursor: pointer;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  background: rgba(255,255,255,0.4);
  border: 3px solid #000;
  border-radius: 20px;
  color: #000;
  display: block;
  font-weight: bold;
  max-width: calc(100%/ 7);
  padding: 10px 20px;
  text-align: center;
  float:left;
  font-size:70%;
}
.r-btn2 {
<!--略-->
}
 .r-btn:hover, .r-btn2:hover {
  background: #c00;
  color: #fff;
}
</style>

<div class="btn-area">

<div class="r-btn2" onClick="location.href='https://evil9.hatenablog.com/'">HOME</div>
<div class="r-btn2" onClick="location.href='https://evil9.hatenablog.com/entry/2022/08/09/193517'">Index</div>
<div class="r-btn" onClick="location.href='https://evil9.hatenablog.com/about'">about</div>
<div class="r-btn" onClick="location.href='https://evil9.hatenablog.com/entry/2022/08/09/193517'">このブログの目次</div>
<div class="r-btn" onClick="location.href='https://evil9.hatenablog.com/entry/2022/08/19/072621'">はじめてのぷろぐれ</div>
<div class="r-btn" onClick="location.href='https://evil9.hatenablog.com/entry/2022/08/18/201806'">ぷろぐれについて語る</div>

<!-- 中略 -->

<div class="r-btn2" onClick="location.href='https://evil9.hatenablog.com/archive/category/■%20diary'">diary</div>

</div>