ホームページ  >  記事  >  ウェブフロントエンド  >  HTML、CSS、jQuery: フローティング効果のあるボタンを作成する

HTML、CSS、jQuery: フローティング効果のあるボタンを作成する

WBOY
WBOYオリジナル
2023-10-24 12:09:391029ブラウズ

HTML、CSS、jQuery: フローティング効果のあるボタンを作成する

HTML、CSS、jQuery: フローティング効果のあるボタンを作成するには、特定のコード例が必要です

はじめに:
現在、Web デザインはアート形式になりました。 HTML、CSS、JavaScript などのテクノロジーを使用すると、さまざまな特殊効果やインタラクティブ効果をページに追加できます。この記事では、HTML、CSS、jQuery を使用してフローティング効果のあるボタンを作成する方法を簡単に紹介し、具体的なコード例を示します。

1. HTML 構造
まず、ボタンに必要な基本構造を HTML ファイル内に作成する必要があります。コード例は次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>浮动按钮</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <button class="float-btn">点击我</button>
    </div>
  </body>
</html>

上記のコードでは、ボタン <div class="container"> <code> を作成します。 class= "float-btn">。フローティング効果を実現するには、 に CSS ファイルを導入する必要もあります。

2. CSS スタイル
次に、CSS を使用してボタンのスタイルを設定し、フローティング効果を実現します。次の CSS コード例を参照してください。

.container {
  width: 300px;
  height: 300px;
  position: relative;
}

.float-btn {
  width: 150px;
  height: 50px;
  background-color: #f00;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.3s, box-shadow 0.3s;
}

.float-btn:hover {
  transform: translateX(-50%) translateY(-10px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

上記のコードでは、コンテナとボタンにそれぞれスタイルを設定しました。コンテナの幅と高さ <div class="container"> は 300px に固定され、相対的に配置されます。 Button<code><button class="float-btn"></button> スタイルには、幅と高さ、背景色、フォントの色、境界線のスタイル、角丸スタイル、フォント サイズなどが含まれます。このボタンは、絶対位置と lefttransform 属性によってコンテナーの下部の水平方向の中央に配置されます。 transitionこの属性は、変換効果の遷移時間を指定するために使用されます。

ボタンの :hover 疑似クラス スタイルでは、transition 属性と transform 属性を使用して、ボタンの動作を実装します。マウスがホバリングしている、フローティング効果。マウスをボタンの上に置くと、ボタンは影付きで 10 ピクセル上に浮き上がります。

3. jQuery の動的効果
最後に、jQuery を使用して、クリック イベントの動的効果をボタンに追加します。コード例は次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>浮动按钮</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="container">
      <button class="float-btn">点击我</button>
    </div>
  </body>
</html>
$(document).ready(function() {
  $('.float-btn').click(function() {
    $(this).toggleClass('active');
  });
});

上記のコードでは、最初に に jQuery ライブラリ ファイルを導入しました。次に、script.js ファイルで $(document).ready() 関数を使用して、ページが読み込まれた後に次のコードが実行されるようにします。ボタンをクリックしたら、toggleClass() メソッドを使用して、ボタンの active クラスを追加または削除します。このようにして、ボタンがアクティブなときに追加でボタンのスタイルを設定したり、アニメーション化したりできます。

概要:
HTML、CSS、jQuery を使用すると、この記事で示したフローティング効果のあるボタンなど、さまざまな特殊効果やインタラクティブ効果を作成できます。この記事のコード例を通じて、読者がそのような効果を実現する方法を予備的に理解し、独自のニーズに応じて設計をさらに最適化およびカスタマイズできることを願っています。

以上がHTML、CSS、jQuery: フローティング効果のあるボタンを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript jquery css html Float class JS 事件 伪类 transform transition
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:Layui を使用して PPT ファイルのオンライン プレビューをサポートするプレゼンテーション アプリケーションを開発する方法次の記事:Layui を使用して PPT ファイルのオンライン プレビューをサポートするプレゼンテーション アプリケーションを開発する方法

関連記事

続きを見る