【HTML】ボタン・チェックボックスなど、コピペデザインまとめサイト

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「CSSButtons.io」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・HTML/CSSのコピペボタンを探している方
・おしゃれなWebデザインを探している方
・Web開発に携わっている方

「CSSButtons.io」って何?

CSSButtons.io」とは、コピペで使えるおしゃれなデザインが見つかるサイトのことです。ボタン・チェックボックス、トグルスイッチなど、Web制作で役に立つパーツが多数あります!(便利〜✨)

Open-Source UI elements - made with CSS and HTML
Library of free and customizable HTML and CSS UI elements. It's all open-source, and it's all free. Try it out to save you many hours spent on building & custom...
【無料】3Dデザインパターン画像【To the Third Dimension】とは?
みなさんこんにちは!おさかなです!今回は「To the Third Dimension」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・3Dデザインのフリー素材・画像を探している方・オシャ...

実際に使ってみよう!

それでは早速サイトにアクセスしましょう!

デザインを探そう!

まずは「Browse all elements」を押します!(ポチっと)

すると……このように「パーツ一覧」が表示されました。(おお!)

アニメーション付きのものも、多くあります!(いいね👍)

(右上の、ネオンボタン好き!💡)

左側のメニューから、「カテゴリ検索」も可能です。

Buttons」カテゴリでは、シンプルかつ洗練されたデザインが多くありました〜!(助かる!)

チェックボックス」はこんな感じ。(ふむふむ…。)

トグルスイッチ」も、使いやすそうなデザインがたくさんあります!

カード」はこんな感じ。

マウスカーソルを乗せると、色々な仕掛けが楽しめます!(かっこいい✨)

ロード・読み込みボタン」は、全体的に動きのあるデザイン。(すごい!)

入力ボックス」も、重宝しそうですね!

【ぐるぐる】「読み込み中」のアニメーションが見つかる!【CSS loaders and Spinners】とは?
みなさんこんにちは!おさかなです!今回は「CSS loaders and Spinners」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・読み込み中のデザインを探している方・ローディング...

ソースコードを確認しよう!

気になるデザインを見つけたら、クリックしましょう!(おりゃー🚩)

すると…?このように、デザインの「ソースコード」が見れます。

左側に「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開発にご活用ください……!(お疲れ様です🎍)

HTML&CSS コーディング・プラクティスブック 1 実践シリーズ | エビスコム | 工学 | Kindleストア | Amazon
AmazonでエビスコムのHTML&CSS コーディング・プラクティスブック 1 実践シリーズ。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
おさかな
おさかな

新年早々、割り箸をシンクに入れたから意味わからない。笑

ナビまる
ナビまる

集中ーっ!!

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

【無料】オンライン講座が作れるサイト【Lectea】とは?
みなさんこんにちは!おさかなです!今回は「Lectea」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・オンライン講座の作り方を知りたい方・自分でオンライン講座を開設したい方・オンライン講...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました