CSSでふわっと変わるボタン

2020.12.08（更新日：2021.03.22）

CSSのみでhover時「ふわっと変わる」ボタンの作成。応用すると単なるリンクから、ちょっとリッチな感じになる。
これも「trans…なんだっけ？」と良くなるのでまとめ。

この記事は１年以上経過しています。内容的に古い場合があります。

HTML

/* HTML */
<p><a href="#" class="fuwa">ボタン</a></p>

リンクボタンにはclassセレクタ「fuwa」を。classにするのは使い回し出来るから。

CSS

/* CSS */
.fuwa {
  /* ボタン成形。この辺は適宜変更 */
  display: inline-block;
  min-width: 30%;
  color: #fff;
  border: 1px #38b48b solid;
  background: #028760;
  line-height: 1.6;
  text-align: center;
  padding: 1em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  /* ここがポイント */
  -webkit-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
.fuwa:hover {
  color: #38b48b;
  background: #fff;
}

「ここがポイント」以下の「transition」数値を変更すれば、速度が変えられる。
JSを使わなくとも簡単に出来るのでお手軽。

DEMO