ボタンなどを設置したときにマウスをあてると動く、ボタンってありますよね。
例えば下記の画像のような感じ。
マウスをあてると少し動きますよね。
- ここがポイント
- ボタンを押している感じを出したいときの小技になります。
※リンクしているボタン(画像)のみが動きます。
CSS編集用デザインの場合
デザイン変更から[CSSの編集]を選択して下記を最後でも良いので貼り付けます。
.botan1 a:hover{
position:relative;top:2px;left:2px;
}
CSS編集が出来ないデザインの場合
フリープラグイン、フリースペースのどちらかに貼り付けます。
※フリースペースに貼り付ける場合は改行を消して貼り付けて下さい。
<style type="text/css">
.botan1 a:hover{
position:relative;top:2px;left:2px;
}
</style>
実際に動かすために
動かしたいボタン(画像)の部分に、記事本分の中に作成するボタンなら
[HTMLタグを表示]を選択して。
<div class="botan1">動かしたい画像のHTML</div>
のように
<div class="botan1">と</div>で囲ってあげればボタンのように動くようになります。
詳細説明
top:2px;left:2px;
という部分が動く幅を決めています。
2pxという数字を変えてあげることで動く幅が変わりますので、自分の好みの動きに調節して見て下さい。
