クールなCSSボタンの作り方

1. ボーダーボタン: 以下のCSSコードを使用して、ボーダーがあるクールなボタンを作成できます。

.button {
  border: 2px solid #000;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #000;
  color: #fff;
}

2. グラデーションボタン: 以下のCSSコードを使用して、グラデーション効果のあるクールなボタンを作成できます。

.button {
  background: linear-gradient(to bottom, #ff5f6d, #ffc371);
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  color: #fff;
}
.button:hover {
  background: linear-gradient(to bottom, #ffc371, #ff5f6d);
}

3. 影付きボタン: 以下のCSSコードを使用して、影があるクールなボタンを作成できます。

.button {
  background-color: #000;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
  transition: box-shadow 0.3s ease;
  color: #fff;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
}
.button:hover {
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.5);
}

これらは、クールなボタンを作成するための基本的な方法です。さまざまなスタイルやエフェクトを追加して、ユニークなデザインを作成することもできます。また、ボタンのサイズや色、テキストなどもカスタマイズできます。

ご参考までに、上記のコードはクラス名「button」を使用していますが、必要に応じてクラス名を変更してください。また、他の要素と組み合わせて使用する場合は、適切にHTMLを構造化することも忘れないでください。

この記事には、ボタンの作り方といくつかのコード例が含まれています。これを参考にして、自分だけのクールなCSSボタンを作成してみてください！