\ Advertisements/

コクーンカスタマイズ|コピペで簡単クリックを促すボタンの作り方!

Cocoon
この記事は約5分で読めます。

 

まいどおおきに!おおもと(@so88qa)です

毎度おなじみの、ワードプレス無料テーマCocoon(コクーン)カスタマイズ記事でございます<(_ _)>

 

今回のカスタマイズはこちら⤵︎

 

 

  1. マウスをボタン上に乗せるとボタンが浮き上がり、影もそれらしい動きをする。
  2. マウスをボタン上に乗せると色が反転する。
  3. ボタンをクリックすると、ボタンが沈み込む

という動きを作ってみました!

 

コピペで簡単に実装できるので、気になる人は使ってくだだいね!

 

物販アフィリボタンのクリック率を向上させるカスタマイズをしてみた!
アフィリエイトボタンのクリック率を27.3%向上させるボタンのカスタマイズ記事です。 ワードプレス無料テーマCocoon(コクーン)を使っている人は参考にしてください。

 

\ Advertisements/

コピペで簡単クリックを促すボタンのコード

.shoplinkamazon a,.shoplinkkindle a ,.shoplinkrakuten a,.shoplinkrakukobo a, .shoplinkyahoo a {
	box-shadow: 0 0 15px rgba(0,0,0,.29);/*ボタンに影をつける*/
	border-radius:4px;/*ボタンの角をとる*/
}

.shoplinkamazon a{
	background-color:#ffb36b;/*アマゾンボタンの背景の色変更*/
	border:solid 2px #ffb36b;/*アマゾンボタンの枠線の色の変更*/
}

.shoplinkrakuten a{
	background-color:#ea7373;/*楽天ボタンの背景の色変更*/
	border:solid 2px #ea7373;/*楽天ボタンの枠線の色変更*/
}

.shoplinkyahoo a{
	background-color:#ff5722;/*ヤフーボタンの背景の色変更*/
	border:solid 2px #ff5722;/*ヤフーボタンの枠線の色変更*/
}

.shoplinkamazon a:hover,.shoplinkrakuten a:hover, .shoplinkyahoo a:hover{
	transform: translateY(-4px);/*ボバー時に上に動くように変更*/
	transition: .6s;/*ホバー時の動きの速度を調整*/
	box-shadow: 0 20px 25px -17px rgba(0,0,0,.29);/*ホバー時の影を変更*/
	opacity:1;/*ホバー時の透明度をなくす*/
	background-color:#fff;/*ホバー時の背景の色の変更*/
}


.shoplinkamazon a:hover{
	border:solid 2px #ffb36b;/*ホバー時のアマゾンボタンの枠線の色変更*/
	color:#ffb36b;/*ホバー時にアマゾンボタンの文字色変更*/
}

.shoplinkrakuten a:hover{
	border:solid 2px #ea7373;/*ホバー時の楽天ボタンの枠線の色変更*/
	color:#ea7373;/*ホバー時に楽天ボタンの文字色変更*/
}

.shoplinkyahoo a:hover{
	border:solid 2px #ff5722;/*ホバー時のヤフーボタンの枠線の色変更*/
	color:#ff5722;/*ホバー時にヤフーボタンの文字色変更*/
}

.shoplinkamazon a:active,.shoplinkrakuten a:active,.shoplinkyahoo a:active{
	transform: translateY(1px);/*クリック時に下に動くように変更*/
	transition: .1s;/*クリック時の動きの速度を調整*/
	color:#fff;/*クリック時の背景の色変更*/
	box-shadow: 0 0 15px rgba(0,0,0,.29);/*クリック時の影を変更*/
}

.shoplinkamazon a:active{
	background-color:#ffb36b;/*クリック時のアマゾンボタンの枠線の色変更*/
	border:solid 2px #ffb36b;/*ホバー時にアマゾンボタンの文字色変更*/
}

.shoplinkrakuten a:active{
	background-color:#ea7373;/*クリック時の楽天ボタンの枠線の色変更*/
	border:solid 2px #ea7373;/*ホバー時に楽天ボタンの文字色変更*/
}

.shoplinkyahoo a:active{
	background-color:#ff5722;/*クリック時のヤフーボタンの枠線の色変更*/
	border:solid 2px #ff5722;/*クリック時にヤフーボタンの文字色変更*/
}

 

CSSとHTMLを勉強するならこの本がオススメ

 

マテリアルデザインを学ぶならこの本

 

\ Advertisements/

コピペで簡単クリックを促すボタンのまとめ

 

今回のカスタマイズは

  1. マウスをボタン上に乗せるとボタンが浮き上がり、影もそれらしい動きをする。
  2. マウスをボタン上に乗せると色が反転する。
  3. ボタンをクリックすると、ボタンが沈み込む

という動きの記事でした。

 

簡単コピペでできるので、ワードプレス無料テーマCocoon(コクーン)を使っている人はぜひ実装してくださいね!

 

物販アフィリボタンのクリック率を向上させるカスタマイズをしてみた!
アフィリエイトボタンのクリック率を27.3%向上させるボタンのカスタマイズ記事です。 ワードプレス無料テーマCocoon(コクーン)を使っている人は参考にしてください。

 

CSSとHTMLを勉強するならこの本がオススメ

 

マテリアルデザインを学ぶならこの本

 

おおもと
おおもと

質問などがあれば、コメント覧に書き込んでくださいね!

タイトルとURLをコピーしました