シェーディングを使用した 3D ボタンの実験

シェーディングとカラーリングを試しているところです.

これらのボタンの色には「assets」の色を使用しました.

ボタンの色は、そこにあるほとんどの CSS フレームワークから着想を得ています.クラスの命名と同様に.

このリストは、ボタンに許可されているクラス名です

btn

btn btn-info

btn btn-success

btn btn-warning

btn btn-error

btn btn-dark

previous pen で同様のシェーディング手法を実行しました.まだの方はチェックしてみてください.

フォント color 、 background-color 、および border-color は、HTML 要素に class 属性を追加するか、CSS クラスに設定することでカスタマイズできます.

今のところ、これらの 3 つの変数をカスタマイズできるようにしました.

color

background-color

border-color

使用例

<!--This is the default usage, where we can use the prepared color by its class name-->
<button class="btn btn-info">Information button</button>

<!--This is the altered usage, by setting the style attribute of the HTML element-->
<button class="btn" style="--background-color: green;">Information button</button>

このスタイルを使用する場合は、これをお読みください

これは SCSS で書かれています. CSS を使用する場合は、コードをコンパイルしてから、独自のプロジェクトで CSS スタイルを使用できます.

コメント ブロックの上のコードに注意してください.
STYLES RELATED TO EXPERIMENT BUTTONS
ページのスタイリングのためだけです.これらはボタンのスタイルとは関係ありません.したがって、CSS にコンパイルした後は、上記のコメント ブロックの上または下の部分を取ることができます.

ソースコードを CSS にコンパイルする前に $btn-type マップを編集することで、ボタンの色をカスタマイズしたり、実際にボタンの新しいクラスを追加したりすることもできます.