CSS Web ボタンのデザイン: さまざまなクールなボタンスタイルを作成します。-CSSチュートリアル-php.cn

CSS Web ボタンのデザイン: さまざまなクールなボタンスタイルを作成します。

WBOY

リリース： 2023-11-18 10:28:10

オリジナル

1725 人が閲覧しました

CSS Web ボタンのデザイン: さまざまなクールなボタンスタイルを作成します。

CSS Web ボタンデザイン: さまざまなクールなボタンスタイルを作成します。具体的なコード例が必要です。

Web デザインにおいて、ボタンは非常に重要な要素です。ユーザーと Web サイト間のリンクだけでなく、全体的な視覚効果とユーザーエクスペリエンスも向上します。優れたボタンスタイルは、魅力的な外観を持つだけでなく、クリック効果やホバー効果などの機能の詳細も考慮する必要があります。この記事では、ボタンのデザインを改善し、Web サイトやアプリケーションに創造性を加えるのに役立つことを期待して、いくつかの CSS ボタンデザインテクニックとクールなスタイルを共有し、コード例も提供します。

1. 基本的な CSS ボタン

まず、最も基本的な CSS ボタンスタイルを見てみましょう:

HTML コード:

<button class="btn">Click me</button>

ログイン後にコピー

CSS スタイル:

.btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn:hover {
  background-color: #3e8e41;
}

ログイン後にコピー

このボタンには、背景が緑色、テキストが白色、枠線が丸いです。マウスをボタンの上に置くと、背景色が濃い緑色に変わり、シンプルなホバー効果が得られます。このボタンスタイルは、基本的にほとんどのシナリオに適用できます。

2. 3D 立体効果ボタン

3D 立体効果ボタンを作成しましょう:

HTML コード:

<button class="btn-3d">Click me</button>

ログイン後にコピー

CSS スタイル:

.btn-3d {
    border: none;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    margin: 20px;
    padding: 10px 20px;
    position: relative;
    text-align: center;
    text-shadow: rgba(0,0,0,.4) 1px 1px;
    transform-style: preserve-3d;
    transition: all .3s ease-out;
    background: linear-gradient(to bottom, #556270 0%,#616161 100%);
    background-color: #556270;
}

.btn-3d:before,
.btn-3d:after {
    border: none;
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
    height: 4px;
    width: 100%;
    transform-style: preserve-3d;
    transition: all .3s ease-out;
}

.btn-3d:before {
    background: #BD3F32;
    transform: translateZ(-1px);
    box-shadow: 0 0 8px rgba(189,63,50,.7);
}

.btn-3d:after {
    background: #3F7FBC;
    transform-origin: left;
    transform: rotateY(90deg) translateZ(-1px);
    box-shadow: 0 0 8px rgba(63,127,188,.7);
}

.btn-3d:hover {
    background: linear-gradient(to bottom, #BD3F32 0%,#616161 100%);
    transform: translateZ(-6px);
    text-shadow: none;
    box-shadow: 0 0 8px rgba(0,0,0,.5);
}

.btn-3d:hover:before {
    transform: translateZ(-13px) rotateY(60deg);
}

.btn-3d:hover:after {
    transform: rotateY(-60deg) translateZ(-13px);
    transition-delay: .05s;
}

ログイン後にコピー

このボタンスタイルには、明らかな 3D 立体的な外観効果とホバー状態での移動/回転効果があり、ユーザーに視覚的なインパクトをもたらすだけでなく、ユーザーエクスペリエンスも向上します。

3. 背景変更ボタン

以下のボタンスタイルは、背景色のグラデーション変化を通じてユーザーに視覚的な手がかりを提供します:

HTML コード:

<button class="btn-change">Click me</button>

ログイン後にコピー

CSS スタイル:

.btn-change {
    cursor: pointer;
    display: inline-block;
    margin: .5rem;
    padding: .75rem 1.5rem;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.btn-change:before {
    border-right: 1px solid white;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: skew(-15deg) scaleY(1.4);
    width: 0;
}

.btn-change:hover:before {
    width: 100%;
    transition: all .3s ease;
}

.btn-change:after {
    border-left: 1px solid white;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: skew(15deg) scaleY(1.4);
    width: 0;
}

.btn-change:hover:after {
    width: 100%;
    transition: all .3s ease;
    transition-delay: .15s;
}

ログイン後にコピー

このボタンスタイルの特徴は、ホバー状態で背景色が徐々に変化することです。これにより、ユーザーを視覚的にわかりやすくガイドできます。

4. 中空効果ボタン

次に、非常にクールな中空効果ボタンスタイルを作成します:

HTML コード:

<button class="btn-void">Click me</button>

ログイン後にコピー

CSS スタイル :

.btn-void {
    border: solid 2px #bada55;
    background: none;
    color: #bada55;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 24px;
    position: relative;
    transition: all .35s;
    overflow: hidden;
}

.btn-void:before,
.btn-void:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #bada55;
    transition: all .35s;
}

.btn-void:before {
    height: 0%;
    width: 100%;
}

.btn-void:after {
    height: 100%;
    width: 0%;
}

.btn-void:hover,
.btn-void:focus,
.btn-void:active {
    border-color: #bada55;
    color: #fff;
}

.btn-void:hover:before,
.btn-void:focus:before,
.btn-void:active:before {
    height: 100%;
}

.btn-void:hover:after,
.btn-void:focus:after,
.btn-void:active:after {
    width: 100%;
}

ログイン後にコピー

このボタンスタイルの特徴は、ホバー状態ではボタンの周囲に白い境界線が表示され、ボタン内の四角形の領域が白になり、ボタンのテキストが緑になることです。全体を復元するとグラデーション効果が出ます。

5. 読み込みボタン

最後に、読み込みステータスのボタンスタイルを見てみましょう:

HTML コード:

<button class="btn-loading">Submit</button>

ログイン後にコピー

CSS スタイル:

.btn-loading {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  position: relative;
}

.btn-loading:after {
  content: "";
  position: absolute;
  top:50%;
  left: 50%;
  border: 6px solid #e6e6e6;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  border-top-color: #3498db;
  animation: spin 2s linear infinite;
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn-loading.loading:after {
  display: block;
}

ログイン後にコピー

このボタンスタイルの特徴は、送信ボタンをクリックした後、ボタンのコンテンツが非表示になり、読み込み中であることをユーザーに知らせるために回転するアニメーションが表示されることです。全体的な効果は比較的直感的です。

まとめ

上記の 5 つのボタンスタイルの紹介を通じて、優れたボタンには魅力的な視覚効果が必要なだけでなく、次のような機能の詳細にも注意を払う必要があることが明確にわかります。ホバー状態の変化、クリック後のインタラクションなどこの記事で提供されているボタンスタイルはすべて CSS に基づいて記述されており、実際のプロジェクトに簡単に適用できます。 Web ページを作成するときは、いくつかの特殊効果の実装にさらに注意を払い、ニーズにより適したボタンを作成できます。

以上がCSS Web ボタンのデザイン: さまざまなクールなボタンスタイルを作成します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。