Niceformsの送信ボタン（submit）がずれる！　Niceformsの送信ボタンだけ別のcssを適用させる

Niceformsは、標準では味気ないフォームをcssで装飾することができます。

Niceformsのデモはこちら

とてもすばらしいデザインのフォームが作れるのですが、送信ボタンの画像がずれてしまうことがあります。

cssを変えたりしていたのですが、うまくいかずに別の方法を試してみることに・・・。
Niceformsの送信ボタンだけ別のcssを適用させる方法です。

適用後はこのようなデザインの送信ボタンになります。

使用するのはこちら。
Make fancy buttons using CSS sliding doors technique

このボタン素材と、cssを使用します。
また、submitをjavascriptに変更します。

使用方法
step1
純正のファイルを一部変更したNiceformsのcss・javascript・画像ファイルのzipをアップロードしてあります。

そのファイルをダウンロードします。
step2
niceforms-default.cssとniceforms.jsを上書きします。

純正のcssと.jsにボタン用のソースを追加したものなので、純正css・.jsに完全上書きしてOKです。

step3

Niceformsのimagesフォルダ内に、button_right.pngとbutton_left.pngを追加します。

step4
送信ボタンsubmitを以下のように変更します。
[sourcecode language=”html”]<a class="button" href="javascript:form.submit()"><span>送信</span></a>[/sourcecode]

これで送信ボタンもそれなりになるはず。

改善した送信ボタン