ルーキーのチュートリアル（runoob.com）
ボタンのアニメーション - 波及効果
<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタのcharset = "UTF-8">
<タイトル>菜鸟教程（runoob.com）</タイトル>
<スタイル>
.button {
位置：相対。
背景色：＃4CAF50。
国境：なし;
フォントサイズ：28px;
色：#FFFFFF;
パディング：20ピクセル;
幅：200pxの。
テキスト整列：センター;
-webkit-遷移時間：0.4秒。/ *サファリ* /
遷移時間：0.4秒。
テキスト装飾：なし;
オーバーフロー：隠されました;
カーソル：ポインタ;
}
.button：{後に
内容： ""。
背景：＃90EE90。
表示ブロック;
ポジション：
パディングトップ：300％;
パディング左：350％。
margin-left：-20px重要;！
マージントップ：-120％;
不透明度：0;
遷移：全0.8S
}
.button：活性：{後に
パディング：0。
マージン：0;
不透明度：1;
トランジション：0
}
</スタイル>
</ HEAD>
<BODY>
<H2>按钮动画-波纹效果</ H2>
<ボタンクラス= "ボタン"> </ button>の私をクリックして
</ BODY>
</ HTML>