【コピペOK】CSSで作る動きのあるボタンのサンプル集

当ページのリンクには広告が含まれています。
  • URLをコピーしました!

CSSアニメーションを使ったボタンのアイデア&サンプル集です。
コピペ後、配色をお好みの色に変更して、ご利用ください。

目次

基本のCSS

まずは基本となるCSSになります。
全てのボタンで共通となりますので、まずはこちらをコピーしてください。

基本2については、枠がないタイプのボタンのみ(ボタンサンプル6)のみで使用します。

フォントサイズや色は、CSS環境、お好みや用途に合わせて調整してください。

1.ゆっくり色が変わるCSSボタン

サンプルボタン1

2.オンマウスで枠線のみ表示されるボタン

サンプルボタン2

3.オンマウスで沈むボタン

サンプルボタン3

4.オンマウスで角丸からピン角になるボタン

サンプルボタン4

5.光が走るボタン

サンプルボタン5

6.オンマウスで下線が走るボタン

サンプルボタン6

基本CSSは .btn_txt を使用してください。

7.オンマウスでグラデーションが反転するボタン

サンプルボタン7

7.オンマウスでグラデーションが反転するボタン

サンプルボタン8

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

目次