みなさんこんにちは！おさかなです！
今回は「CSSButtons.io」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・HTML/CSSのコピペボタンを探している方
・おしゃれなWebデザインを探している方
・Web開発に携わっている方
「CSSButtons.io」って何？
「CSSButtons.io」とは、コピペで使えるおしゃれなデザインが見つかるサイトのことです。ボタン・チェックボックス、トグルスイッチなど、Web制作で役に立つパーツが多数あります！(便利〜✨)
実際に使ってみよう！
それでは早速サイトにアクセスしましょう！
デザインを探そう！
まずは「Browse all elements」を押します！(ポチっと)
すると……このように「パーツ一覧」が表示されました。(おお！)
アニメーション付きのものも、多くあります！(いいね👍)
(右上の、ネオンボタン好き！💡)
左側のメニューから、「カテゴリ検索」も可能です。
「Buttons」カテゴリでは、シンプルかつ洗練されたデザインが多くありました〜！(助かる！)
「チェックボックス」はこんな感じ。(ふむふむ…。)
「トグルスイッチ」も、使いやすそうなデザインがたくさんあります！
「カード」はこんな感じ。
マウスカーソルを乗せると、色々な仕掛けが楽しめます！(かっこいい✨)
「ロード・読み込みボタン」は、全体的に動きのあるデザイン。(すごい！)
「入力ボックス」も、重宝しそうですね！
ソースコードを確認しよう！
気になるデザインを見つけたら、クリックしましょう！(おりゃー🚩)
すると…？このように、デザインの「ソースコード」が見れます。
左側に「HTML」、右側に「CSS」が記載されており、それぞれスクロール可能です。(よいしょ！)
「Theme」スイッチを切り替えると…？
このように「背景色」が明るい場合の見え方も、チェックできます！(さすが🌱)
「Copy CSS」または、「Copy HTML」から、コードをコピーできます。
(今日くらいはゆっくり休んでくださいね……💤)
実装しよう！
最後に、コピーしたコードを「WordPress」で実装する方法を紹介します！
まずは「ダッシュボード」から「投稿」＞「新規追加」をクリック。
記事編集ページが開いたら、「＋プラスマーク」をクリック！(えい！)
「カスタムHTML」を選択します。(はい！)
入力ボックスが出現したら、「HTMLコード」をそのまま貼り付けましょう！
<button> Button</button>続いて、CSSコードの場合は、必ず<style>タグの中に貼り付けます。(焦らずゆっくり🍵)
<style>ここにCSSコードを貼り付ける</style>
↓コード記載例
<button> Button</button>
<style>
button {
--glow-color: rgb(217, 176, 255);
~省略~
</style↓実際に作成したものがこちら
Webデザインは奥が深いので、自身で色々とカスタマイズしても面白いかもしれません！ぜひWeb開発にご活用ください……！(お疲れ様です🎍)
新年早々、割り箸をシンクに入れたから意味わからない。笑
集中ーっ！！
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
