【Cocoon】ボタンにマウスを重ねたときのエフェクトをカスタマイズ

Cocoon ボタン 設定方法

 

おかぴー

こんにちは!
WEBデザイナーのおかぴー(@blueokap)です。

当ブログについての詳しい内容はこちらです。

 

今回は、Cocoonのテーマでボタンにマウスを置いたときのエフェクトをかけてみました。

CSSをコピペするだけでできるようになっているので、カスタマイズの参考にしてくださいね。

カスタマイズする前に
カスタマイズをするときは、子テーマを使って、バックアップをとってから行ってください。CSSを貼り付ける場所はこちらから。

Cocoonのボタンのコード

 

まず、Cocoonのテーマで使うボタンはどのようになっているかですが、基本的にボタンの長さによってCSSのクラス名が3種類に分かれています。

ここでは、赤いボタンを例にして解説しますね↓

Cocoon ボタン 設定方法

 

Cocoonボタンのコードの仕組み

・一番小さいボタン
<a class="btn btn-red">ボタン1</a>

・中くらいのボタン(btn-mを追加する)
<a class="btn btn-red btn-m">ボタン2</a>

・一番大きいサイズのボタン(btn-lを追加する)
<a class="btn btn-red btn-l">ボタン3</a>

 

通常であれば、下の画像のようにドラッグ・ボタン選択で簡単にボタンにできるのですが、今回のカスタマイズではその作業で作られたボタンのコードを使うので最初に仕組みをお話ししています^^

Cocoon ボタン 設定方法

ボタンにしたいテキストを選択して、

 

Cocoon ボタン 設定方法

「スタイル>ボタン>好きなボタン」を選ぶと、

 

Cocoon ボタン 設定方法

ほい!!

Cocoonのボタン設定も、ものすごく簡単にできるように作られててすばらしい!

 

では、具体的にカスタマイズするときに、あなたが使っているボタンのコードが何なのかを確認する方法です。

下の黄色のマーカー部分をあなたが使っているボタンコードです。

先ほどの赤いボタンの例を見ると、

ソースコード

・赤い一番小さいボタン
→「btn btn-色の名前

<a class="btn btn-red">ボタン1</a>

・赤い中くらいのサイズのボタン
→「btn btn-色の名前 btn-Mサイズ

<a class="btn btn-red btn-m">ボタン2</a>

・赤い一番大きいサイズのボタン
→「btn btn-色の名前 btn-Lサイズ

<a class="btn btn-red btn-l">ボタン3</a>

このように、「btn」というコードで対象箇所をボタンにしていて、

小さいサイズでは「btn」と「btn-色の名前」だけ指定。

中くらいのサイズでは、「btn-m」(middle=ミドル)の意味のコードが追加され、

大きいサイズでは、「btn-l」(large=ラージ)の意味のコードが追加されています。

 

たとえば、これを「イエロー・小」「パープル・中」「ライトブルー・大」の場合は、こんな感じに書き換わっています↓

Cocoon ボタン 設定方法

 

ソースコード

・イエロー・小
<a class="btn btn-yellow">ボタン1</a>

・パープル・中
<a class="btn btn-purple btn-m">ボタン2</a>

・ライトブルー・大
<a class="btn btn-light-blue btn-l">ボタン3</a>

何となく仕組みが見えてきましたか?

違う点は、「class="  "」で囲まれているコードのところ。

今回のカスタマイズでは、主に赤いボタンのコードを参考にしていますが、ここを使っているものに差し替えることで全部のボタンにエフェクトを効かせることができますよ!

 

下にふわっと沈むエフェクト

 

マウスをボタンに重ねたとき、こんな動きになります↓

Cocoon ボタン 設定方法
ソースコード

.btn:hover{
transform: translateY(6px);
-webkit-transform: translateY(6px);
}

※「-webkit-」に続くコードは同じにする必要があります。
これは、見る端末によって差が出ないように指定する意味になっているので、同じにしましょう。

ポイントは、「6px」の数字を大きくすると、その分沈むのが深くなります。

ちなみに、これはボタンの色(btn-redとか)やサイズ(btn-mとか)を指定しなくてもボタン全てにこれだけで反映されます。

逆に、赤いボタンだけに使いたい場合は、「btn-red」と指定してあげると他のボタンには影響なくできるはずです。

 

上にふわっと浮くエフェクト

 

次は、逆に上にふわっと浮くエフェクト↓

Cocoon ボタン 設定方法
ソースコード

.btn:hover{
transform: translateY(-6px);
-webkit-transform: translateY(-6px);
}

先ほどとの違いは、数字がマイナスになっただけです。

つまり、プラスかマイナスで上下の動きが変わるんですね。

 

ボタンのエフェクトの速度を変える

 

さて、上の2つを試したときに、マウスがボタンから外れたとき「しゅっ!!」と勢いよくボタンが戻るのにお気づきでしょうか?

この戻るときの速度も調整ができます↓

Cocoon ボタン 設定方法
エフェクトの速度を変える

.btn{
transition:.5s ease-in-out;
}

 

この「transition」というCSSを使うと、速度を調整することができて、「.5s」と書いてあるところを、

「1.2s」とか「1s」、「.1s」とかにすることで好きな速度に変更できます。

数字が小さくなるほど遅くなるので、色々試してみてくださいね。

 

「.5s」は、「0.5s」(0.5秒)と同じ意味なので、頭にゼロをつけなくても動作するはずですー。

 

ボタンを立体的にする

 

ボタンに影をつけてみます↓

Cocoon ボタン 設定方法
立体的にする

.btn{
box-shadow: 0 7px 0px #a0a0a0;
}

ボタンの大きさごとに変えたい場合は、サイズ指定のコードを。
色ごとに変えたい場合は、色指定のコードを追加してくださいね。

 

「box-shadow」というコードを使って、影(shadow)を作り立体的に見せるようにしています。

最後にある「#a0a0a0」は、カラーコードといって、WEBページで色を表現する際に使うコードなのですが、これを好きな色に変更することで今回であればボタンの影の色を変更することができます。

僕がよく使っているコード一覧のサイトがあるので、こちらよければ使ってください^^

 

応用編

 

これらを組み合わせれば、こういったエフェクトをかけることができます^^↓

Cocoon ボタン 設定方法
ソースコード

コードを複数使ってエフェクトをかけるので、中くらいのボタンで指定する場合をここでは書いていきます。

/*これで影を指定します*/
.btn{
box-shadow: 0 7px 0px #a0a0a0;
}

/*hoverを使って、ボタンが重なったときに、下に沈む動きをつける*/
.btn:hover{
transform: translateY(6px);
-webkit-transform: translateY(6px);
}

/*マウスを外したときの動きをスムーズに*/
.btn{
transition:.5s ease-in-out;
}

 

そして、ボタンっぽく押した感じにすることもできます↓

Cocoon ボタン 設定方法

これは、ボタンを重ねたときに影の数字を小さくすることで、まるでボタンを押したようなエフェクトにすることができます。

そのコードがこちら↓

ソースコード

/*これで影を指定します*/
.btn{
box-shadow: 0 7px 0px #a0a0a0;
}

/*hoverを使って、ボタンが重なったときに影を小さくして、下に沈む動きをつける*/
.btn:hover{
box-shadow: 0 1px 0 #a0a0a0;
transform: translateY(6px);
-webkit-transform: translateY(6px);
}

/*マウスを外したときの動きをスムーズに*/
.btn{
transition:.5s ease-in-out;
}

 

まとめ

 

今回のカスタマイズは基本的なものでしたが、これから時間があるときに内容をアップデートできたらいいなと思っています。

逆に「こんな動きってできないの?」っていうものがありましたら、リクエストもらえれば検証してお伝えしますね!

 

それでは!

 

WEB業界でも得られない
収益化のための知識が無料で学べます


次世代起業家育成セミナー


あなたは今、こんな悩みを抱えていませんか?
  • ●ブログでの収益化に伸び悩んでいる
  • ●アドセンス広告の収入に限界を感じている
  • ●記事の更新に焦りと疲弊感を感じている
  • ●今のやり方に疑問・不安を感じている
  • ●リスクなく収益化をしたい
  • ●ブログのコンセプトがなかなか決まらない
  • ●どんな記事を書いていったらいいかわからない
  • ●集客について効果的な方法を知りたい

その悩みを解決する方法を書きました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください