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

プロジェクトでは、ほぼすべての 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="输入框按钮">

レンダリング:

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

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

.button {
       background-color: #4CAF50;
       border: none;
       color: white;
       padding: 15px 32px;
       text-align: center;
       font-size: 16px;
       cursor: pointer;
   }

画像表示:

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

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