ホームページ > 記事 > ウェブフロントエンド > CSS Web ナビゲーション ボタン: 多様なナビゲーション ボタン スタイルを作成する
CSS Web ページ ナビゲーション ボタン: 多様なナビゲーション ボタン スタイルを作成するには、特定のコード サンプルが必要です
ナビゲーション ボタンは Web ページの一般的な要素の 1 つであり、は Web ページ全体にとって非常に重要であり、スタイルとユーザー エクスペリエンスが重要な役割を果たします。 Web ページにさらにインタラクティブ性と美しさを加えるために、CSS を通じてさまざまなナビゲーション ボタン スタイルを作成できます。この記事では、いくつかの一般的なナビゲーション ボタン スタイルを紹介し、参考として具体的なコード例を示します。
フラット ボタン
フラット ボタンとは、立体感や影効果のないボタン スタイルを指します。通常、シンプルでクリーンな外観を持ち、モダンでミニマリストなスタイルの Web ページに適しています。以下はフラット ボタンのコード例です:
.flat-button { background-color: #3498db; color: #fff; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
この例では、background-color
プロパティと color
プロパティを使用して背景色とテキストを定義します。ボタンの色、padding
属性はボタンのパディングを設定するために使用され、border
属性と border-radius
属性は境界線のスタイルを定義するために使用されます。ボタンの丸い角、cursor
属性は、ボタン上のマウスのスタイルを手の形として指定します。
三次元ボタン (3D ボタン)
三次元ボタンは、影とグラデーション効果を使用してボタンに立体感を加え、よりレイヤー感と質感を与えます。 。 3 次元ボタンのコード例を次に示します。
.3d-button { background: linear-gradient(to bottom, #3498db, #2980b9); color: #fff; padding: 10px 20px; border: none; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); cursor: pointer; }
この例では、linear-gradient
属性を使用して、ボタンのグラデーション背景色 box を作成します。 -shadow
Attribute は、ボタンの影効果を追加するために使用されます。グラデーションの開始色と終了色を調整することで、さまざまなボタン効果を実現できます。
フローティング ボタン
フローティング ボタンは、コンテンツ上にフローティングするボタン スタイルで、モバイル デバイス上のアプリケーションで一般的です。多くの場合、丸みを帯びた外観と顕著な影の効果があり、ページから浮いているような印象を与えます。以下は、フローティング ボタンのコード例です。
.floating-button { background-color: #3498db; color: #fff; width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); position: fixed; bottom: 20px; right: 20px; cursor: pointer; }
この例では、ボタンの幅と高さを 60px に設定し、border-radius
属性を使用してボタンの形状を円として指定し、box-shadow
プロパティを通じてボタンの影効果を追加します。 position
属性を使用して、ページの右下隅にボタンを配置します。
上記の例を通じて、CSS を使用してさまざまなナビゲーション ボタン スタイルを作成する方法を確認できます。実際のニーズに応じて、ボタンの背景色、テキストの色、境界線のスタイル、丸い角、影の効果、その他の属性を調整して、さまざまなボタン効果を実現できます。 Web デザインでは、ユニークで魅力的なナビゲーション ボタンはユーザー エクスペリエンスを向上させるだけでなく、Web サイト全体の美しさも向上します。この記事のコード例があなたの Web デザイン作業にインスピレーションを与え、美しいナビゲーション ボタンの作成に役立つことを願っています。
以上がCSS Web ナビゲーション ボタン: 多様なナビゲーション ボタン スタイルを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。