CSS を使用してさまざまな効果を持つボタンを作成する方法

CSS を通じてさまざまなボタン効果を実現できます。たとえば、色のグラデーション効果ボタンは CSS のグラデーション属性やプレス効果によって設定できます。ボタンは box-shadow を通じて実現できます。

今日この記事では、フラット、ボーダー、グラデーション、シャドウなどのいくつかの異なるスタイルのボタン効果を作成し、スタイル ボタンを押す方法を紹介します。次に記事内ではCSSコードで効果を実現する方法を詳しく紹介します。

#HTML コード

<div class="pm">
	<button>平面按钮</button>
</div>

基本的な CSS スタイル コード

button{
display: inline-block;
margin: 0 10px 0 0;
padding: 15px 45px;
font-size:20px;
font-family:"Bitter",serif;
line-height: 20px;
appearance: none;
 box-shadow:none;
 border-radius: 0;
}

(1) フラット スタイル CSS ボタン

フラット スタイル ボタンの使用は現在非常に人気があり、遍在するフラット デザインのトレンドと一致しています。 、これらのフラット スタイルのボタンは見栄えがします。次のコードは通常状態のボタンです

.pm button {
  color:#fff;
  background-color:#6496c8;
  border:none;
}

レンダリング:

(2 )Borderスタイル CSS ボタン

ボーダー スタイル ボタンは、フラット ボタンと同じカテゴリに属します。唯一の違いは、フラット ボタンに使用される背景色の代わりに境界線を使用することです。次のコードは、ボタン

.pm button {
  color:#444;
 border:5px solid #6496c8;
  background-color: #fff;
}

Rendering の通常の状態です。

(3) グラデーションと影のスタイルCSS ボタン

このグラデーションと影のスタイルのボタンは、過去に見られたボタンの効果とより一致しています。カラフルな色のボタンが好きなら、グラデーション/シャドウ スタイルのボタンが最適です。このボタンの作成の良い点は、その効果がすべて CSS で行われるため、解像度の低下や新しい画像の作成を心配することなく、簡単に拡大または縮小できることです。次のコードはボタンの通常の状態です

.pm button {
  color:#fff;
  text-align: center;
  box-shadow:inset 0 0 0 1px #e91e637d; 
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, rgb(244,103,34), rgb(197,29,124));
  background: -moz-linear-gradient(right, rgb(244,103,34), rgb(197,29,124)); 
  background: linear-gradient(to right, rgb(244,103,34) , rgb(197,29,124));}
}

レンダリング:

(4 ) スタイル付き CSS を押しますボタン

これらの「押す」スタイルのボタンは、フラットなデザインと錯覚を組み合わせて、ユーザーに実際にボタンを押したように感じさせます。ユーザーがそれを押すと、ページ内で動かなくなったように見えます。この実装では、シャドウを使用して 3D ポップアップの外観を設定する必要があります。以下のコードは通常状態のボタンです

.pm button {
  color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px #27496d;
}

レンダリング:

概要: 以上がこの記事の概要ですこの記事が、CSS を使用してボタン効果を作成する方法を学ぶのに役立つことを願っています。

以上がCSS を使用してさまざまな効果を持つボタンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。