”Cocoon”には最初から「ボタン」と「囲みボタン」が装備されて、違いは「ボタン」は通常のリンクの作成用、「囲みボタン」はアフィリエイトリンク作成用と分類できます。
今回は、沈み込むボタンの作成と、色を変える方法をまとめました。
沈みこむボタン
✔ ボタンの下に影をつける。
✔ カーソルを乗せた時に沈みこませる。
✔ カーソルを乗せた時に沈みこませる。
CSSコード
CSSコードは”Cocoon”子テーマの「style.css」に貼ってください。
/* −−ボタンを浮かして影をつける−−*/ .btn { box-shadow: 0 7px 0px #808080; } /*−−−ボタンが重なったときに沈む−−−*/ .btn:hover { box-shadow: 0 1px 0 #808080 ; transform: translateY(6px); -webkit-transform: translateY(6px); } /*−−−カーソルを外したときに元に戻す−−−*/ .btn{ transition:.5s ease-in-out; }
ボタンの色をカスタマイズ
”Cocoon”のボタン標準色は18種類と、大・中・小の3種類のサイズが用意されています。
CSSコードを追加して色コードを変更すると色の設定を変更できます。
✔ ”Cocoon”子テーマの「style.css」にCSSコードを貼り付ける。
✔ #から始まるカラーコードを書き換える。
✔ #から始まるカラーコードを書き換える。
”Cocoon”のデフォルトCSS
デフォルトのカラー
.btn-white{
color: #333;
background-color: #fff;
}
#container .btn-white:hover{color: #333;}
/*色の変更はここから下をコピーして子テーマにCSSに貼り付ける*/
.btn-red{background-color: #e60033;} /*レッド*/
.btn-pink{background-color: #e95295;}/*ピンク*/
.btn-purple{background-color: #884898;}/*パープル*/
.btn-deep{background-color: #55295b;}/*ディープパープル*/
.btn-indigo{background-color: #1e50a2;}/*インディゴ(紺色)*/
.btn-blue{background-color: #0095d9;}/*ブルー*/
.btn-light-blue{background-color: #2ca9e1;}/*ライトブルー*/
.btn-cyan{background-color: #00a3af;}/*シアン*/
.btn-teal{background-color: #007b43;}/*ティール(緑色がかった青)*/
.btn-green{background-color: #3eb370;}/*グリーン*/
.btn-light-green{background-color: #8bc34a;}/*ライトグリーン*/
.btn-lime{ background-color: #c3d825;}/*ライム*/
.btn-yellow{ background-color: #ffd900;}/*イエロー*/
.btn-amber{background-color: #ffc107;}/*アンバー(琥珀色)*/
.btn-orange{background-color: #f39800;}/*オレンジ*/
.btn-deep-orange{background-color: #ea5506;}/*ディープオレンジ*/
.btn-brown{background-color: #954e2a;}/*ブラウン*/
.btn-grey{background-color: #949495;}/*グレー*/
CSSコードは”Cocoon”子テーマの「style.css」に貼ってください。
色コード(#****の部分)を変更すると「ボタン」の色が変わります。
サイズと形状のカスタマイズ
デフォルトのサイズと形状(大・中・小の3種類)
/*ボタンサイズと形状*/
.btn{/*ボタン(小と全体)*/
color: #fff;
background-color: #32373c;
font-weight: bold;
border-radius: 4px;/*角を丸める*/
display: inline-block;
cursor: pointer;
line-height: normal;
padding: 7px 13px;/*上下の余白・左右の余白*/
text-decoration: none;
text-align: center;
font-size: 14px;/*文字の大きさ*/
border: 2px solid transparent;
position: relative;
}
.btn-m{/*ボタン(中)*/
padding: 14px 45px;/*上下の余白・左右の余白*/
font-size: 16px;/*文字の大きさ*/
}
.btn-l{
padding: 14px 20px;/*上下の余白・左右の余白*/
font-size: 18px;/*文字の大きさ*/
margin: 1em;
display: flex;
justify-content: center;
align-items: center;
}
サイズと形状をカスタマイズするには、コードを変更してみて下さい。