HTML と CSS を使用してボタンのテキスト表示効果を作成する方法

この記事では、HTML と CSS を使用してボタンを作成し、表示効果をテストする方法について説明します。

ボタンは、Web サイトにとって最も重要なユーザー インターフェイス コンポーネントです。創造的にユニークな方法でボタンをデザインすることが非常に重要です。ボタンのテキスト表示効果は、オファーや刺激的なコンテンツを表示するために使用されます。ユーザーエクスペリエンスを向上させるため。

このアプローチは、ボタンと同じ寸法のストリップでボタンを覆い、マウスホバーで任意の一方向にボタンを動かすことです。

上記のアプローチを進めるには、CSS プロパティを使用したボタン アプローチのテキスト表示効果に使用される、ホバーの前の 2 つのセレクターについて知る必要があります。

::before セレクターは、他の要素のコンテンツの前に同じコンテンツを複数回追加するために使用される CSS 疑似要素です。このセレクターは ::after セレクターと同じです。これは、選択した要素の最初の子を表す疑似要素の作成に役立ち、content 属性を使用して要素に装飾コンテンツを追加するためによく使用されます。デフォルト値はインラインです。

＃＃＃文法＃＃＃

以下は before セレクターの構文です -

リーリー

:hover selector は、マウスが要素の上に置かれたときに要素のスタイルを設定するために使用される CSS 疑似クラスです。これは任意の要素に適用でき、マウスを上に置いたときに要素を選択します。

＃＃＃文法＃＃＃

以下は before セレクターの構文です -

リーリー

次の HTML コード スニペットは、button タグを使用して単純なボタンの作成を実装します。

インデックス.html

リーリー

CSS コード -

CSS コードを実装する手順は次のとおりです -

ステップ 1

-パディングや境界線の半径を追加して角を丸くするなど、ボタンに基本的なスタイルを適用します。

ステップ2 -次に、前セレクターを使用して、ボタン全体をカバーする同じ寸法のストリップを作成します。

ステップ3

-次に、ホバーセレクターを使用して、例では左に移動しているように、ストリップを任意の一方向に移動します。 Note

− 必要に応じてストリップを任意の方向に移動できます。また、他のプロパティを使用して、必要に応じて効果を調整することもできます。

Index.css

リーリー

Example の中国語訳は次のとおりです: Example

完全なコード -上記の2つのコード部分を組み合わせたものです。

ああ、

サポートされているブラウザ - pointer-events プロパティでサポートされているブラウザは以下にリストされています -

Google Chrome 1.0

エッジ 12.0

Internet Explorer 11.0

Firefox 1.5

• オペラ 9.0
• サファリ4.0
注-Opera 4-6はシングルコロン.(::before)をサポートします。
• この記事では、HTML と CSS を使用して、Before セレクターと CSS セレクターによるテキスト表示効果を持つボタンを作成する方法に焦点を当てています。

以上がHTML と CSS を使用してボタンのテキスト表示効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。