CSSボタンのグラデーションカラー

CSS3のグラデーション機能の応用。一連のボタンを見てみましょう。CSS を使用してグラデーション ボタンを作成しただけです (画像や Javascript は必要ありません)。 これらのボタンはフォントのサイズに応じて伸縮できます。これらのボタンのサイズは、パディングやフォント サイズが変更された場合に簡単に調整できます。 このメソッドの最も優れた点は、p、span、p、a、button、input などの任意の HTML 要素に適用できることです。

なぜこれらのボタンはとてもクールなのでしょうか?

純粋な CSS: 画像や Javascript アプリケーションは使用しません。

グラデーションは複数のブラウザー (IE、Firefox 3.6、Chrome、Safari) に適用できます。

柔軟でスケーラブル: フォント サイズとパディング値を変更することで、ボタンのサイズと丸い角を調整できます。

ボタンには通常、ホバー、アクティブの 3 つの状態があります。

は、a、input、button、span、p、p、h3 などの HTML 要素に適用できます。

注: CSS3 がサポートされていない場合、通常のボタン (グラデーションと影なし) として表示されます。

プレビュー

下の写真は、さまざまなブラウザーのさまざまな表示効果を示しています。

ボタンのいくつかの状態

通常の状態 = 太字と影の効果のあるグラデーション。

ホバー = 暗いグラデーション

アクティブ化 = 逆グラデーション、1 ピクセル下、暗いフォント。

ボタンの一般的なスタイル

次のコードは、クラス .button の一般的なスタイルです。 フォント サイズの変更に基づいて自由に拡大縮小できるようにするために、padding と border-radius に em 値を使用しました。丸い角とボタンのサイズを調整するには、境界線の半径、フォント サイズ、パディング値を変更するだけです。 例: フォント サイズとパディング値を減らすことで、より小さなボタンを作成できます。

.button {display: inline-block;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em;-moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);}.button:hover {text-decoration: none;}.button:active {position: relative;top: 1px;}

色の一般的なスタイル

次のコードは、オレンジ色の CSS スタイルです。 1行目の背景はCSS3をサポートしていないブラウザ用のバックアップ、2行目の背景はWebkitなどのブラウザ用、3行目の背景はFirefox用、最後の行は専用のフィルタです。 Internet Explorerで認識されます。

.orange {color: #fef4e9;border: solid 1px #da7c0c;background: #f78d1d;background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));background: -moz-linear-gradient(top,  #faa51a,  #f47a20);filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');}.orange:hover {background: #f47c20;background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));background: -moz-linear-gradient(top,  #f88e11,  #f06015);filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');}.orange:active {color: #fcd3a5;background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));background: -moz-linear-gradient(top,  #f47a20,  #faa51a);filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');}

私のボタンの使い方は?

青いボタンが好きで、それをページに適用したいとします:

まず、.button と .blue の CSS をコピーします。

次に、Go を追加します。以下に示すように、ボタンにする HTML 要素 (ee7959cc8dd4be16ef633321c03dac32Button5db79b134e9f6b82c0b36e0489ee08ed など) に追加します。 CSS は、link、p、span、p、input、button などの要素に適用できます。

関連記事:

HTML5 Canvas: グラデーションカラーを描画

div+css 背景グラデーションカラー コード例

css グラデーションカラー 省略記号 フォントの埋め込み テキストシャドウの詳しい紹介