CSSで方向性に照らされた3Dボタンを作成します

これにどのようにつまずいたのか、あまりわかりません。しかし、何かが私をこのツイートに導きました：

CSSとのこの方向照明カーソルの相互作用を行った人はいますか？ pic.twitter.com/zll7sk6kw5

—ジェドブリッジ（@jedbridges）2020年7月1日

そして、私にとって、それは挑戦です。

ボタンの設計はきちんとしています。しかし、私は直接コピーをしたくありませんでした。代わりに、「Twitter」ボタンを作成することにしました。アイデアは、ソーシャルアイコンが付いたほとんど透明なボタンを作成するということです。そして、そのソーシャルアイコンは下に影を落とします。マウスをボタン上に移動すると、その上に光が当てられます。ボタンを押すと、表面に押します。最終結果は次のとおりです

方向照明3D CSS Twitterボタン？ https://t.co/qpfzewumey by @codepen pic.twitter.com/zwfwtpaixo

— Jhey ?? （@jh3yy）2021年1月30日
この記事では、あなたもそれを作ることができるかを見ていきます。クールなことは、アイコンを好きなものに交換できるということです。

キーテイクアウト

CSSとHTMLを利用して、カーソルの動きに応答する動的な照明効果を備えた3Dボタンを作成し、ユーザーの相互作用を強化します。

パグを実装して、ボタンのSVGアイコンを効率的に生成し、ミキシンを使用して異なるアイコンに簡単にスワップして調整できるようにします。 「変換スタイル：preserve-3d;」などのCSSプロパティを操作することにより、3Dの視覚効果を実現し、変数を使用して深さと視点を制御します。

「Aria-Hidden」属性を使用してアクセシビリティを強化し、インタラクティブな要素がスクリーンリーダーを介して知覚可能であることを確認します。

CSSの遷移と変換を適用して、ボタンを押すなどの物理的相互作用をシミュレートし、ユーザーエクスペリエンスにリアリズムを追加します。
• JavaScriptを使用して、滑らかなアニメーション用のGSAPを使用して、カーソル位置に基づいてボタンを横切ってライトシャインを移動するなど、動的効果を使用して使用します。
• マークアップ
このようなものを作成するための私の最初のテイクアプローチは、マークアップを足場にすることです。最初に検査すると、使用されるソーシャルアイコンを複製する必要があります。これを行うためのきちんとした方法は、パグを使用してミキシンを活用することです。
ここでは、TwitterアイコンのSVGをレンダリングするためのMixinを作成しました。これにより、Twitterアイコンがレンダリングされます。
それを行うと、大きなTwitterアイコンが得られます。
ペンを参照してください 1.SitePoint（@SitePoint）でアイコンをレンダリング Codepenで。

• ソーシャルアイコンセットは同じ「0 0 24 24」ビューボックスを使用する傾向があるため、タイトルとパスの引数を作成できます。

  <span><span>mixin icon()</span>
  </span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
  </span>    <span>title Twitter icon
  </span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
  </span>

  その後、Twitterアイコンは

  になります

  <span><span>+icon()</span>
  </span>

  しかし、私たちはそれをキーに渡すことができます - そして、私たちが使用したいか繰り返したい多くのアイコンがある場合、オブジェクトにパスを保存することができます：

  <span><span>mixin icon(title, path)</span>
  </span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
  </span>    <span>title= title
  </span>    <span>path<span><span>(d=path)</span></span>
  </span>

  これは、再利用するアイコンミックスを作成するためのきちんとした方法です。私たちの例ではもう少し過剰ですが、注目に値します。
  今、ボタンにマークアップが必要です。

  <span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
  </span>

  アクセシビリティに注意することは常に良いことです。ブラウザの開発者ツールで

  アクセシビリティパネルをチェックすることで、ボタンが発生するものを確認できます。

  

  ボタンテキストにスパンを入れて、Aria Hiddenでアイコンを非表示にすることをお勧めします。読者を選別するために利用できるようにしながら、スパンテキストも非表示にすることができます：

  <span><span>mixin icon(key)</span>
  </span>  <span>-
  </span>    <span>const PATH_MAP = {
  </span>      <span>Twitter<span>:</span> "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
  </span>    }
    <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
  </span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
  </span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
  </span>
  <span><span>+icon('Twitter')</span>
  </span>

  これらのARIA隠された属性を適用するためのさまざまなオプションがあります。使用するものは、Mixinコードを変更してAria-Hiddenを適用することです。
  パグのもう1つのきちんとした方法は、すべての属性をミックスインに通過することです。これは、いくつかの属性を渡すだけのシナリオで役立ちます。

  <span><span>.scene</span>
  </span>  <span>button<span>.button</span>
  </span>    <span>span<span>.button__shadow</span>
  </span>      <span><span>+icon('Twitter')</span>
  </span>    <span>span<span>.button__content</span>
  </span>      <span><span>+icon('Twitter')</span>
  </span>      <span>span<span>.button__shine</span>
  </span>

  アクセシビリティ

  <span><span>.scene</span>
  </span>  <span>button<span>.button</span>
  </span>    <span>span<span>.button__shadow</span>
  </span>      <span><span>+icon('Twitter')</span>
  </span>    <span>span<span>.button__content</span>
  </span>      <span>span<span>.button__text</span> Twitter
  </span>      <span><span>+icon('Twitter')</span>
  </span>      <span>span<span>.button__shine</span>
  </span>

  パネルをもう一度確認すると、ボタンは「Twitter」のみに読み取られます。そして、それが私たちが望むものです！

  スタイル

  ここにあなたが来た部分があります - 私たちが物をどのようにスタイリングしますか。開始するために、これをドロップしました：
  これにより、ボタンに必要な3D変換を作成できます。最終的なデモでそれをオフにしてみてください。すべてが壊れることがわかります。

  目からスパンテキストを隠しましょう。これを多くの方法で行うことができます。スクリーンリーダーの要素ではなく、目から要素を隠すための推奨される方法の1つは、これらのスタイルを使用することです。

  <span><span>mixin icon(key)</span>
  </span>  <span>-
  </span>    <span>const PATH_MAP = {
  </span>      <span>Twitter<span>:</span> "...path code"
  </span>    }
    <span>svg<span>.button__icon<span>(role=<span>'img' aria-hidden="true" xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
  </span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
  </span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
  </span>

  ボタンで作業を開始する前に、シーンを傾けます。これを使用してこれを行うことができます。ここでは、変換をチェーンして、それを私たちが望む位置に入れることができます。ここでは、ライブストリームで値を少しずつぐるぐる時間を過ごして、オリジナルに近づけます：

  そこにもサイズ変数に気付くでしょう。 CSS変数を使用して、ボタン用に特定のものを駆動します。これにより、値と効果をいじくり回すのに便利になります。通常、これらは必要な範囲の下に置きます。しかし、このようなデモのために、ファイルの上部にあるルートの下に置くと、

  で遊ぶことが簡単になります。

  <span><span>mixin icon(key)</span>
  </span>  <span>-
  </span>    <span>const PATH_MAP = {
  </span>      <span>Twitter<span>:</span> "...path code"
  </span>    }
    <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span><span>&attributes(attributes)</span></span>
  </span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
  </span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
  </span>

  これらは私たちが取り組んでいる変数であり、ボタンを構築するにつれて理にかなっています。

  ボタン

  ボタンに移動しましょう！ボタン要素はシーン要素を埋めます。サイジングを適用し、ボタンに直接変換することもできました。しかし、他のボタンや要素を導入する場合は、それらすべてを変換してサイズする必要があります。これは、一般的にCSSに留意すべきものです。コンテナの要素にレイアウトを指示するようにしてください：

  <span><span>mixin icon()</span>
  </span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
  </span>    <span>title Twitter icon
  </span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
  </span>

  ここでは、ボタンスタイルを削除します。そして、それは私たちにこれを与えます。

  ペンを参照してください 9。SitePointによるストリップボタンスタイル（@SitePoint） Codepenで。

  次に、ボタンのコンテンツと影の共通の開始点を作成する必要があります。各要素に絶対的な位置決めを与えることでこれを行うことができます。コンテンツには、以前に定義した深度変数に基づいて3D翻訳があります。

  <span><span>+icon()</span>
  </span>

  - radius変数もどのように使用しているかに注意してください。

  ペンを参照してください 10。SitePoint（@SitePoint）でボタンの深さを与える Codepenで。

  この段階で2つのアイコンを区別するのは困難です。そして今はそれらをスタイリングする良い時期です。基本的なアイコンスタイリングを適用し、各SVGアイコンにスコープ塗りつぶしを使用できます。
  そこに到達しています！ただし、現時点ではアイコンは同じサイズではありません。それに到達します。
  ペンを参照してください 11. SitePoint（@SitePoint）でスコープ塗りつぶしを適用します Codepenで。

  <span><span>mixin icon(title, path)</span>
  </span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
  </span>    <span>title= title
  </span>    <span>path<span><span>(d=path)</span></span>
  </span>

  ボタンを押して所定の位置に押しましょう。この部分は、統合をすばやく統合します：

  それだけです！スコープされたCSS変数を使用して、Z軸変換を削除すると言っています：Active。変換への移行を追加すると、それが非常に瞬時になるのを止めます。

  ペンを参照してください 12。 Codepenで。

  やるべきことは、ボタンレイヤーと輝きのスタイルだけです。影から始めましょう：

  <span><span>mixin icon()</span>
  </span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
  </span>    <span>title Twitter icon
  </span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
  </span>

  ここに別のスコープスタイルがあります。ボタンを押すと、影がぼやけなくなったと言っています。そして、影を曖昧にするために、CSS変数で定義した値であるぼかしフィルターでCSSフィルタープロパティを使用します。 -blur変数と遊び、何が起こるかを見てください。

  ペンを参照してください 13。SitePoint（@SitePoint）でホバーのぼやけを減らす Codepenで。

  コンテンツレイヤーの場合、背景色を使用してから、背景フィルターを適用します。フィルターと同じように、バックドロップフィルターは、要素に視覚効果を適用する方法です。現在、一般的なユースケースは、「Glassmorphism」にぼやけを使用することです。

  <span><span>+icon()</span>
  </span>

  - blurの値を使用し、バックドロップフィルターに移行を適用します。 -blur変数をスコープした方法のために：アクティブで、ほぼ無料で移行を取得します。なぜオーバーフロー：隠されていますか？ボタンの周りを移動する輝きの要素が予想されています。ただし、外でさまようことは望ましくありません。
  ペンを参照してください 14。SitePointによるスタイリングコンテンツレイヤー（@SitePoint） Codepenで。
  そして今、パズルの最後のピース - その光が輝いています。これは、アイコンを別のサイズにしているものです。スタイルがないため、レイアウトに影響します。いくつかのスタイルを教えてみましょう：
  絶対的なポジショニングがアイコンのサイジングを整理すること。境界線半径を適用すると、スポットライトが発生します。また、フィルターを再度使用して、ぼやけたスポットライト効果を与えます。端に明るさフィルターをチェーンして、ぼやけた後に少し明るくすることに気付くでしょう。

  <span><span>mixin icon(title, path)</span>
  </span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
  </span>    <span>title= title
  </span>    <span>path<span><span>(d=path)</span></span>
  </span>

  ペンを参照してください 15。SitePointによるスタイリング輝き（@sitepoint） Codepenで。
  3D翻訳を使用すると、輝きがボタンの上にあることを保証します。このように、他の要素とのz戦闘によってそれがカットされる可能性はありません。

  今のところスタイルに必要なのはそれだけです。次に、いくつかのスクリプトの時間です

  スクリプト
  ここでは、便利なためにグリーンソックを使用します。彼らは私たちが望むもののためにいくつかのきちんとしたユーティリティを持っています。しかし、Vanilla JavaScriptで同じ結果を達成することができました。 「モジュール」というタイプのスクリプトを使用しているため、Skypackを利用できます。
  そして今、私たちはいじくり回し始める準備ができています。ボタンがポインターの動きに応答したいと考えています。私たちが望む最初のことは、それが私たちのポインターに従うかのように輝きを翻訳することです。 2つ目は、ポインターがどこにあるかに応じてボタンをシフトすることです。

  <span><span>mixin icon()</span>
  </span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
  </span>    <span>title Twitter icon
  </span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
  </span>

  必要な要素をつかみ、ドキュメントに基本的なイベントリスナーを設定しましょう。
  このデモでポインターを動かして、xとyのために返される貴重品を見てみてください：
  ペンを参照してください 16. SitePointによる要素をつかみ、イベントリスナーを作成する（@SitePoint） Codepenで。

  <span><span>+icon()</span>
  </span>

  これは最も難しいビットです。輝きの位置を解決するには、数学が必要です。最初のリセットの後、輝きを翻訳します。これに対応するには、まずシャインスタイルを更新する必要があります。スコープ付きCSS変数-Xおよび-Yを使用しています。私たちは彼らに-150のフォールバックを与えますので、デモがロードされるとそれらはショットから外れます：

  次に、更新関数では、輝きの新しい位置を計算します。これは、ボタンサイズの一部に基づいています。ポインター位置からボタンの位置を差し引くことでこれを計算できます。次に、それを位置で分けます。終了するには、200を掛けてパーセンテージを取得します

  たとえば、

  pos_x：

  <span><span>mixin icon(title, path)</span>
  </span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
  </span>    <span>title= title
  </span>    <span>path<span><span>(d=path)</span></span>
  </span>

  ポインター位置xをつかみます。

  <span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
  </span>

  [ボタンの位置xを差し引きます。

  ボタン幅で除算。
  200を掛けます。
  3. 輝きがボタンの半分のサイズであるため、200を掛けます。この特定の部分は、ポインターを追跡して3Dスペースにマッピングしようとしているため、トリッキーです。
  それをボタンに適用するには、GSAP.setを使用してこれらのCSS変数を設定できます。これは、ゼロ秒のトゥイーンとして機能するGSAPメソッドです。要素の値を設定するのに特に役立ちます：
  しかし、さらに一歩進めたい場合は、GSAPのQuickSetterを使用できます。
  これにより、更新関数は次のように見えます：

  <span><span>mixin icon()</span>
  </span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
  </span>    <span>title Twitter icon
  </span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
  </span>

  ポインターに従うことの精度には、正確にするには、より多くの計算が必要になります。ボタンのオーバーフローが表示され、輝きがより顕著になるこのデモで遊びをしてください。 Shine Elementがその追跡を失う方法を見ることができます。

  ペンを参照してください 17。ShitePointによるシャインプレイグラウンドの翻訳（@SitePoint） Codepenで。
  このデモは、すべてを本来あるべき場所に置きます。
  ペンを参照してください 18。ShitePointによる輝き（@SitePoint）の翻訳 Codepenで。
  最後の機能。追加のタッチのためにボタンをシフトしましょう。ここでは、ポインター位置のボタンのシフトをベースにします。しかし、私たちはその動きを制限します。これを行うには、別のGSAPユーティリティを使用できます。 MapRangeを使用します。これにより、1つの値のセットを別のセットにマッピングできます。その後、値を渡して、マップされた値を取り戻すことができます。

  最初に、動きの制限を定義します。これは、ボタンのサイズの割合です：

  さて、更新関数では、シフトの割合を計算できます。これは、制限に対してウィンドウの幅をマッピングすることで行います。ポインターの位置を入力して、マップのパーセンテージを取り戻す：

  <span><span>+icon()</span>
  </span>

  このブロックでは、0からwindow.innerwidthの範囲を-10〜10に対してマッピングします。ポインター位置xを通過すると、-10〜10の間の値が得られます。 。垂直シフトについても同じことを行い、これにより次のような更新機能が得られます。

  <span><span>mixin icon(title, path)</span>
  </span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
  </span>    <span>title= title
  </span>    <span>path<span><span>(d=path)</span></span>
  </span>

  それだけです！
  CSSと少しスクリプトで方向性のある3Dボタンを作成する方法です。クールなことは、比較的簡単に変更を加えることができるということです。

  <span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
  </span>

  最終的なデモでは、いくつかの追加の詳細を追加してアイコンを変更しました。あなたはそれを認識するかもしれません。
  ペンを参照してください 20。SitePointによるSitePointボタン（@SitePoint） Codepenで。

  いつものように、読んでくれてありがとう。もっと見たいですか？ Twitterで私を見つけに来たり、The Live Streamをチェックしてください！

  CSSを使用して方向性に照らされた3Dボタンの作成に関するよくある質問クリックしたときに変更するCSSを使用して3Dボタンを作成するにはどうすればよいですか？

  クリックしたときに変更する3Dボタンを作成するには、CSSでアクティブな擬似クラスを使用します。この擬似クラスは、ユーザーによってアクティブ化されているときに要素をスタイリングするために使用されます。たとえば、クリック時にボタンの色、サイズ、または位置を変更できます。簡単な例を次に示します：

  
  .button：Active { background-color：＃3e8e41;
  box-shadow：0 5px＃666;
  変換：翻訳（4px）;
  }
  この例では、クリックするとボタンの背景色が異なる緑の色合いに変わります。 Box-Shadowプロパティはシャドウエフェクトを追加し、変換プロパティはボタンをわずかに下に移動します。 3Dボタンは、以下を使用して実現できます。この擬似クラスは、マウスポインターの上にあるときに要素をスタイリングするために使用されます。色、サイズを変更したり、ホバリングしたりしたら、ボタンに影を追加できます。簡単な例を次に示します。
  
  .button：hover { background-color：＃3e8e41;

  box-shadow：0 5px＃666;

  }

  この例では、ボタンの背景色は、ホバリングしたときに緑の異なるシェードに変わり、影の効果が追加されます。

  
  3Dボタンを応答するにはどうすればよいですか？ CSSのクエリ。メディアクエリを使用すると、さまざまなデバイスまたは画面サイズにさまざまなスタイルを適用できます。たとえば、画面のサイズに応じてボタンのサイズまたは位置を変更できます。簡単な例を次に示します。
  
  @media画面と（max-width：600px）{
  .button {
  width：100％;
  padding：20px;

  } }

  この例では、ボタンの幅は100％に設定され、画面サイズが600px以下の場合、パディングが増加します。 3Dボタンに遷移効果を追加することは、CSSの遷移プロパティを使用して実現できます。このプロパティを使用すると、効果の速度を指定できます。たとえば、色を変えるか、影を徐々に表示することができます。簡単な例は次のとおりです。

  .button { transition：background-color 0.5s ease、box-shadow 0.5s ease;
  }
  この例では、背景色と影0.5秒の期間にわたって徐々に変化します

  丸い角を備えた3Dボタンを作成するにはどうすればよいですか？

  丸い角で3Dボタンを作成するには、CSSでBorder-Radiusプロパティを使用することが含まれます。このプロパティを使用すると、丸い境界線を要素に追加できます。たとえば、ボタンの角を丸くすることができます。簡単な例を次に示します。
  
  .button {
  border-radius：12px;
  }
  この例では、ボタンの角は12pxの半径で丸くなっています。 >グラデーションの背景を持つ3Dボタンを作成するにはどうすればよいですか？

  勾配背景の3Dボタンを作成するには、CSSで線形勾配関数を使用することが含まれます。この関数を使用すると、2色以上の間に遷移する勾配を作成できます。簡単な例は次のとおりです。

  .button { background：linear-gradient（右、＃ff7f00、＃ff5500）;
  }
  この例では、ボタンの背景は濃いオレンジ色の色のオレンジ色の色。
  
  シャドウエフェクトで3Dボタンを作成するにはどうすればよいですか？ 。このプロパティを使用すると、要素に影を追加できます。たとえば、ボタンに影を追加して3Dに見せることができます。簡単な例は次のとおりです。
  

  .button {}この例では、ボタンにはボタンの下に5pxの影があり、15pxのぼやけた半径があります。影の色は半透明の黒です。

  
  境界線のある3Dボタンを作成するにはどうすればよいですか？
  
  境界線のある3Dボタンを作成するには、CSSの境界プロパティを使用します。このプロパティを使用すると、要素に境界線を追加できます。たとえば、ボタンに境界線を追加して目立たせることができます。簡単な例を次に示します。
  
  .button {

  border：2px solid＃ff5500;

  }

  この例では、ボタンにはオレンジ色の2pxソリッドボーダーがあります。 >

  テキスト内にテキストが付いた3Dボタンを作成するにはどうすればよいですか？
  
  テキストが内部にある3Dボタンを作成するには、CSSのテキストプロパティを使用します。これらのプロパティを使用すると、要素内でテキストをスタイリングできます。たとえば、ボタン内のテキストの色、サイズ、またはフォントを変更できます。簡単な例を次に示します。
  
  .button {
  color：#fff;

  font-size：20px;

  font-family：arial、sans-serif;

  }

  この例では、ボタン内のテキストは白で、サイズは20pxで、Arialフォントを使用しています。

  すべてのブラウザと互換性のある3Dボタンを作成するにはどうすればよいですか？

  すべてのブラウザと互換性のある3Dボタンを作成するには、CSSのベンダープレフィックスを使用することが含まれます。これらのプレフィックスを使用すると、すべてのブラウザで完全にサポートされる前に、新しいCSS機能を使用できます。たとえば、ChromeとSafariの-Webkit -Prefix、Firefoxの-moz-プレフィックス、およびInternet Explorerの-ms-プレフィックスを使用できます。簡単な例は次のとおりです。
  
  .button {
  -webkit-transition：background-color 0.5s ease、box-shadow 0.5s ease;
  -moz-transition：background-color 0.5s ease 、Box-Shadow 0.5s ease;
  -ms-transition：background-color 0.5s ease、box-shadow 0.5s ease;
  transition：background-color 0.5s ease、box-shadow 0.5s ease;
  }
  この例では、遷移効果はChrome、Safari、Firefox、およびInternet Explorerと互換性があります。

以上がCSSで方向性に照らされた3Dボタンを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。