みなさんこんにちは!おさかなです!
今回は「CSSButtons.io」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・HTML/CSSのコピペボタンを探している方
・おしゃれなWebデザインを探している方
・Web開発に携わっている方
「CSSButtons.io」って何?
「CSSButtons.io」とは、コピペで使えるおしゃれなデザインが見つかるサイトのことです。ボタン・チェックボックス、トグルスイッチなど、Web制作で役に立つパーツが多数あります!(便利〜✨)
![](https://osakanav.com/wp-content/uploads/2022/12/tothethirddimension-top-160x90.png)
実際に使ってみよう!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse-1.png)
デザインを探そう!
まずは「Browse all elements」を押します!(ポチっと)
![](https://osakanav.com/wp-content/uploads/2023/01/9RZNB8jbRWty2Vf1672553040_1672553055.png)
すると……このように「パーツ一覧」が表示されました。(おお!)
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse-btn-1.png)
アニメーション付きのものも、多くあります!(いいね👍)
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse.gif)
(右上の、ネオンボタン好き!💡)
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse-neon-1.png)
左側のメニューから、「カテゴリ検索」も可能です。
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse-cate.png)
「Buttons」カテゴリでは、シンプルかつ洗練されたデザインが多くありました〜!(助かる!)
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse-butn-1.png)
「チェックボックス」はこんな感じ。(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse-check-1.png)
「トグルスイッチ」も、使いやすそうなデザインがたくさんあります!
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse-toggle-1.png)
「カード」はこんな感じ。
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse-cards-1.png)
マウスカーソルを乗せると、色々な仕掛けが楽しめます!(かっこいい✨)
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse-rights.gif)
「ロード・読み込みボタン」は、全体的に動きのあるデザイン。(すごい!)
![](https://osakanav.com/wp-content/uploads/2023/01/uivers-load-1.png)
「入力ボックス」も、重宝しそうですね!
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse-input-1.png)
![](https://osakanav.com/wp-content/uploads/2021/11/load-top-160x90.png)
ソースコードを確認しよう!
気になるデザインを見つけたら、クリックしましょう!(おりゃー🚩)
![](https://osakanav.com/wp-content/uploads/2023/01/LUDaQCBQopQNcvy1672553229_1672553241.png)
すると…?このように、デザインの「ソースコード」が見れます。
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse-code-1.png)
左側に「HTML」、右側に「CSS」が記載されており、それぞれスクロール可能です。(よいしょ!)
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse-code.gif)
「Theme」スイッチを切り替えると…?
![](https://osakanav.com/wp-content/uploads/2023/01/switch-1.png)
このように「背景色」が明るい場合の見え方も、チェックできます!(さすが🌱)
![](https://osakanav.com/wp-content/uploads/2023/01/uiverse-white-1.png)
「Copy CSS」または、「Copy HTML」から、コードをコピーできます。
![](https://osakanav.com/wp-content/uploads/2023/01/6UKseCVKhP1V3U81672553399_1672553414.png)
(今日くらいはゆっくり休んでくださいね……💤)
実装しよう!
最後に、コピーしたコードを「WordPress」で実装する方法を紹介します!
まずは「ダッシュボード」から「投稿」>「新規追加」をクリック。
![](https://osakanav.com/wp-content/uploads/2021/03/wp-sinkituika.png)
記事編集ページが開いたら、「+プラスマーク」をクリック!(えい!)
![](https://osakanav.com/wp-content/uploads/2021/03/Inkedwp-block-new_LI.jpg)
「カスタムHTML」を選択します。(はい!)
![](https://osakanav.com/wp-content/uploads/2021/05/Inkedwp-plus-custom-html_LI.jpg)
入力ボックスが出現したら、「HTMLコード」をそのまま貼り付けましょう!
<button> Button</button>
続いて、CSSコードの場合は、必ず<style>タグの中に貼り付けます。(焦らずゆっくり🍵)
<style>ここにCSSコードを貼り付ける</style>
![](https://osakanav.com/wp-content/uploads/2020/02/20-02-04-17-35-42-435_deco-300x300.jpg)
↓コード記載例
<button> Button</button>
<style>
button {
--glow-color: rgb(217, 176, 255);
~省略~
</style
↓実際に作成したものがこちら
Webデザインは奥が深いので、自身で色々とカスタマイズしても面白いかもしれません!ぜひWeb開発にご活用ください……!(お疲れ様です🎍)
![](https://osakanav.com/wp-content/uploads/2020/02/20-02-14-16-45-29-735_deco-300x300.jpg)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
新年早々、割り箸をシンクに入れたから意味わからない。笑
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
集中ーっ!!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2022/12/lectea-top-160x90.png)