CSSでふわっと浮かぶボタンやキラっと光るボタンなどを作ってみた!

こんにちは。 ブログ歴15年、最近CSSで色々作るのが大好きなLeoです。

今日は、Cocoonに標準装備されているボタンとは別にCSSで作ってみたボタンのお話です。

ボタンを作ろうと思った理由

無料テーマ最強の「Cocoon」ですから、標準装備としていろんなボタンが実装済みです。

アフィリエイトサイトで特に需要がある気がする光るボタンも追加せれて盤石なイメージもありますが、それでも別途CSSでボタンを作ろうと思った理由があります。

それは、

  1. 全体的にデザイン性を統一させるため
  2. テーマ固有のショートコード多用をやめたいから

以上の2つの理由がありました。

1. デザインの問題

これはボクが原型をとどめないレベルでCocoonをいじってしまったからかも知れませんが、デフォルトのボタンは色をはじめちょっと固すぎる気分がしています。

↑こんな感じのボタンがサクッと作れるのでその機能に頼ればええやん、って話なんですが、シンプルでフラットである一方、最近多用している影を用いたマテリアルなデザイン感とちょっと合わなくなってきました。

2. ショートコードを減らしたい

ボクの中ではこれも大きな理由になってきています。

前にも書いたことがあるかと思いますが、Cocoonに大変満足している一方、もしかしたらそのうち別の有料テーマに引っ越すかも?という想定が最近湧いているんですよね。

有料テーマの中には、例えばSTORKだったかな?有名どころのテーマから引っ越ししやすいような引っ越しツールが提供されているものもあったりするのですが、

ボクがテーマを変える場合きっと海外製のものになるのでCocoonのショートコードは全て書き換える作業が必須となります。

その辺を見越した時、

エディター内から気軽にサクッとボタンを装備できるメリットを捨ててでも、将来的にテーマを引っ越しても大元のCSSさえテーマに追記すればすぐに復帰できるCSS頼みの表記にした方がいい気がしし始めているというお話です。

作ってみたボタン

そんなこんなでボクが普段使うであろうボタンを色々作ってみました。

基本のボタン

まずは基本のボタンですが、元から影付きで浮いている感じで、マウスオーバーでさらにふわっと浮かぶデザインで作りました。

BUTTON

BUTTON

BUTTON

BUTTON

横幅いっぱいのボタン

もっとアテンションが欲しいボタンとして、横幅いっぱいになるボタンも用意。

BUTTON

BUTTON

BUTTON

BUTTON

キラッと光るボタン

さらにもっともっとアテンションが欲しいボタンは、光るやつですよね。Cocoonでも光るボタンはあるんですけど、まあ、作りました。

BUTTON

BUTTON

BUTTON

BUTTON

Cocoonにはないボタン

あと二つ、Cocoonにはないボタンを作ってみました。

CTA的ボタン

こちらはCTAみたいな、お問い合わせページに引っ張る的なボタンです。パソコンからだとマウスオーバーで押し込んだ感じになるのでアクションを促しやすいです。

Amazonへ誘うボタン

Amazonでチェック

基本的にこのボタンはアフィリエイトやってる人用ですね。

HTMLでアイコンと文言変えれば楽天とか他のリンク用にも使えますが、ボクは自分がAmazonでばっかり買うのでアマボタンだけ作りますた。

参考にしたページたち

今回作ったのは以上だけでそんなに数ありませんが、作るにあたって色々参考にさせていただきました。

本当に、いい時代です。

めっちゃためになるし、勉強になるしこんな素晴らしい情報が無料なんて。。。。

まとめ・総括

以上、時間にして3時間くらいかな?

脱テーマ独自のショートコード利用を目指してCSSでボタンを作ってみました。

すでに挿入済みのボタンを置換するかはまだわかりませんが、とりあえずここから先投稿する記事では自作の方を使っていこうと思いますっ。

Cocoonへのカスタマイズ一覧もどうぞ

シアトル生まれ、大阪育ち。6年前に独立・起業しましたが、コロナ禍で事業が大ダメージを受け、人生の方向転換に悪戦苦闘の日々です!とにかく、「ワクワク」に満ちた毎日を目指してできることから地道に頑張っています〜!