CSSボタンの作成方法

CSSを使用してボタンを作成する方法はいくつかあります。以下にいくつかのコード例を示します。

1. ベーシックなボタン:

   <button class="basic-button">ボタン</button>
   <style>
   .basic-button {
   padding: 10px 20px;
   background-color: #007bff;
   color: #fff;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   }
   </style>

2. ホバーエフェクトを追加したボタン:

   <button class="hover-button">ボタン</button>
   <style>
   .hover-button {
   padding: 10px 20px;
   background-color: #007bff;
   color: #fff;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.3s ease;
   }
   .hover-button:hover {
   background-color: #0056b3;
   }
   </style>

3. アウトラインボタン:

   <button class="outline-button">ボタン</button>
   <style>
   .outline-button {
   padding: 10px 20px;
   background-color: transparent;
   color: #007bff;
   border: 2px solid #007bff;
   border-radius: 4px;
   cursor: pointer;
   }
   </style>

これらはいくつかの基本的なボタンスタイルの例です。デザインや要件に応じて、CSSをカスタマイズすることができます。他にもさまざまなボタンスタイルやエフェクトがありますので、必要に応じて調査して試してみてください。

以上が、CSSを使用してボタンを作成する方法のいくつかの例です。これらのコード例を使って、自分のウェブサイトやブログに素敵なボタンを追加してみてください。