1

ここで説明する特定の CSS ボタンを作成しようとしています。

http://www.2shared.com/file/5131551/412bd8a8/Sans_titre-1_copie.html

基本的には、以下の条件を満たすボタンです。

  • 内側のテキストは HTML コンテンツです (テキスト + 画像が含まれます)
  • 角が丸くなっている
  • マウスを乗せると色が変わる
  • 柔軟な幅と高さ
  • ボタンの任意の場所をクリックするとアクティブになるラジオ ボタンです。

それを作成するのに役立つアイデアやリファレンスはありますか?

4

2 に答える 2

1

http://css-tricks.com/video-screencasts/17-sliding-doors-button/

これは、ボタンに動的/柔軟なサイズを設定するクールな方法であり、必要な html をその中に配置するのはそれほど難しくありません... 色を付けるには、CSS をもう少しいじる必要があります。 、しかし、ほんの少しの創造的な css/html で問題ないと思います。

このボタンを作成することから始めて、取得した CSS の結果をお知らせください。

添加：

今すぐ試す時間はありませんが、html でラジオ ボタン、テキスト、および画像をスパンで実行し、そのリンクを柔軟な寸法設定に使用してから、CSS でホバー色の変更を行います...再び私たちを投稿してください！

于 2009-03-20T14:42:16.237 に答える
0

これはかなり厄介だと言いたいだけです。これはテストされていませんが、可能な限り最小限の要素を使用しています。四方引き戸です。

HTML:

<a href="your-url-here" class="button">
  <div class="inner-1">
    <div class="inner-2">
      <div class="inner-3">
        Your stuff
      </div>
    </div>
  </div>
</a>

CSS:

a.button {
  background: url('topleft-image-url') no-repeat top left;
  display: block;
  float: left;
}

  a.button .inner-1 { url('topright-image-url') no-repeat top right; }
  a.button .inner-2 { url('bottomright-image-url') no-repeat bottom right; }
  a.button .inner-3 {
    url('bottomleft-image-url') no-repeat bottom left;
    padding: 0.5em;
  }

  // You still need to re-speicify the extra attributes of background for browser compatibility
  a.button:hover { background: url('topleft-image-url-over') no-repeat top left; }

    a.button:hover .inner-1 { url('topright-image-url-over') no-repeat top right; }
    a.button:hover .inner-2 { url('bottomright-image-url-over') no-repeat bottom right; }
    a.button:hover .inner-3 { url('bottomleft-image-url-over') no-repeat bottom left; }

サイズの制約 (例: 幅または高さ) の 1 つを取り除く場合、2 つdivの を削除できます (つまり、双方向の引き戸を作成します)。

どちらの手法でも、ボタンが経験する幅と高さの最大境界を超えるようにセグメント間に十分な透明度を持つ gif または png を作成することで、画像を最適化できます。各州に 1 つずつ、これにより、8 つではなく 2 つの画像のみが必要になります。

少し考えれば、パーセンテージ ベースまたはピクセル ベースの背景配置を使用して、両方の状態を 1 つの画像にマージする方法もおそらくわかるでしょう。これにより、CSS も簡素化できます。

于 2009-03-24T00:24:42.537 に答える