2015年05月30日(土)

ゴーストボタンにマウスを乗せたときの動きいろいろ16個

• 0
• 231
• 306
• 318

今回、以下のルールに沿って16個サンプルを作りました。

• HTMLは全て同じ
• マウスを乗せる前は同じ状態
• 擬似要素は使っても1つだけ

擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せたときに動きをつけるサンプルを紹介します。

サンプルはこのページで全て載せていますが、まとめて見たいという方はこちらをどうぞ。

ということで、HTMLはこんな感じになります。

sample 1

普通のリンクですね。btnは共通部分、sample1はサンプルごとで違ってくる部分になります。

では、共通部分のCSSです。

a.btn{ display: inline-block; width: 120px; margin: 45px 40px 40px; padding: 15px 10px; border: 1px solid #fff; background: transparent; color: #fff; text-align: center; text-decoration: none; line...