<p>ホバーで薄くなるVer</p>
<div class="btn01">
  <a href="dummy">ボタン</a>
</div>
<p>ホバーで色が反転するVer</p>
<div class="btn02">
  <a href="dummy">ボタン</a>
</div>
/* スタイルのリセット */
a {
  text-decoration: none;
  color: inherit;
}
/* パッと変わるVer */
.btn01{
  width:200px;
}
.btn01 a{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  border: 1px solid;
  border-radius: 30px;
  font-weight: bold;
  transition: 0.5s;
}
.btn01 a:hover{
  opacity: 0.5;
}
/* ふわっと変わるVer */
.btn02{
  width:200px;
}
.btn02 a{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  border: 1px solid;
  border-radius: 30px;
  font-weight: bold;
  transition: 0.5s;
}
.btn02 a:hover{
  background: #000;
  color:#fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.