CSS ボタンのスタイル コードを添付して、CSS ボタンを作成する複数の方法を共有します。

yulia
リリース: 2018-09-11 14:31:08
オリジナル
7636 人が閲覧しました

プロジェクトでは、ほぼすべての Web サイトで、十数から数個のボタンが使用されます。実用的で見栄えの良いボタンはページに多くの色を追加し、ユーザーの注目を集めることができます。この記事では主に CSS ボタンのさまざまな記述方法と CSS ボタンの美化について説明します。最後に、参考として一般的な CSS ボタンのスタイル コードを示します。はい、読み続けてください!

1. CSSボタンの色々な書き方

CSSボタンはボタンで直接書くこともできますし、inputを使って書くこともできます、もちろんdivを使うこともできます。各タグの特性に応じて、さまざまなスタイルを使用して好みに設定します。たとえば、a タグでボタンを記述する場合は、必ず text-decoration: none 属性を使用します。ボタンを使用して美しく記述する場合は、border: none 属性を使用します。

1. ボタン ボタン (スタイルなし)

<button>默认按钮</button>
ログイン後にコピー

2. ラベル ボタンのハイパーリンク

<a href="#" class="button">链接按钮</a>
ログイン後にコピー

CSS 部分:

.button {
       background-color: #4CAF50;
       color: white;
       padding: 15px 32px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 16px;
   }
ログイン後にコピー

3. ボタン ボタン (スタイルあり)

<button class="button">按钮</button>
ログイン後にコピー

4.ボタン

.button {
       background-color: #4CAF50;
       border: none;
       color: white;
       padding: 15px 32px;
       text-align: center;
       font-size: 16px;
       cursor: pointer;
   }
ログイン後にコピー
ログイン後にコピー

CSS 部分:

<input type="button" class="button" value="输入框按钮">
ログイン後にコピー

レンダリング:

CSS ボタンのスタイル コードを添付して、CSS ボタンを作成する複数の方法を共有します。

2. 一般的な CSS ボタン スタイル コード

ユーザーがこのボタンをクリックすると、右側の画像が表示されます。効果としては、背景色が暗くなり、ボタンの周囲の影が内側の影になります。

.button {
       background-color: #4CAF50;
       border: none;
       color: white;
       padding: 15px 32px;
       text-align: center;
       font-size: 16px;
       cursor: pointer;
   }
ログイン後にコピー
ログイン後にコピー

画像表示:

CSS ボタンのスタイル コードを添付して、CSS ボタンを作成する複数の方法を共有します。CSS ボタンのスタイル コードを添付して、CSS ボタンを作成する複数の方法を共有します。 上記では、どのような方法でボタンを作成できるのか、どのようなスタイルを設定すれば美しい外観になるのかを紹介します。最後に、学習者の参考のために例を示します。

以上がCSS ボタンのスタイル コードを添付して、CSS ボタンを作成する複数の方法を共有します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート