0

ボタンとして画像を使用する css ファイルがあります。ユーザーがボタンをホバーすると、画像は次のように他の位置に再割り当てされます。

button.btn,
input[type="submit"].btn {
  *padding-top: 2px;
  *padding-bottom: 2px;
    background: url(http://www.eurekavi.com/ci_crud_1/assets/grocery_crud/themes/flexigrid/css/images/btn_cancelar.png) no-repeat;
    border: none;
    cursor: pointer;
    display: block;
    height: 30px;
    text-indent: -3000px;
    width: 80px;

}

button.btn,
input[type="submit"].btn:hover  {
background: url(http://www.eurekavi.com/ci_crud_1/assets/grocery_crud/themes/flexigrid/css/images/btn_cancelar.png) no-repeat 0 -30px;
    }

HTMLにコードを追加します：

<div class="form-button-box">
    <input type="submit" value="" class="btn btn-large" />
</div>

これを行うと、画像に含まれるテキストを保持するボタンが表示されます。それはうまくいきます。

しかし、テキストが変数である場合、それはできません。テキストごとに異なる画像を作成する必要があります...それは良くありません。

ボタンのテキストを属性として渡す入力ボタンを生成し、同じ効果を持たせたいのですが、2 つの問題があります。

  1. ホバー時に正しい色を生成し、すぐに他の色に移動する方法。(良いジェネレーターを知っていますか) 私のベースカラーは#7d7d7d最終的なものです#272727

  2. 私のボタンで奇妙な効果を回避する方法、それがアニメーションやスライドのようなもので、すぐにそれをしないとき、私のフィドルを見てください

このフィドルに表示されている最後のボタン（スライド効果なし、ホバーするとすぐに色が変わることを意味します）を完成させるのを手伝ってもらえますか？

4

1 に答える 1

0

CSS ですべてを作成し、画像を使用しない必要があるため、さまざまなテキスト用に大量の画像を作成する必要はありません。このサイトをチェックして、勾配コードをすばやく生成するために使用してください。それ以外の場合、ボタンはかなりシンプルで、CSS で簡単に作成できます。あなたの質問の要点が欠けている場合はお知らせください。

于 2013-03-19T01:07:21.863 に答える