まいどおおきに！コクーンの無料カスタム相談をしています。おおもと(@so88qa)です
この記事は、マウスオーバー時の動きがおしゃれなボタンの作り方を紹介しています。
動きはコレ⤵︎（gifをクリックして拡大ができるよ！）
ワードプレス無料テーマCoccon(コクーン)の物販リンクのボタンを簡単コピペで改造できるので、気になる人はぜひ最後まで読み進めてくださいね！
もくじ
おしゃれなアマゾンボタンの作り方
.shoplinkamazon a,.shoplinkamazon a::after{
/*○○sでアニメーションのスピードを調整*/
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}
.shoplinkamazon a {
background-color:#ffb36b;/*マウスオーバー前のアマゾンボタンの背景の色*/
border:solid 2px #ffb36b;/*マウスオーバー前のアマゾンボタンの線の色*/
position: relative;
display: block;
overflow: hidden;
}
.shoplinkamazon a::before,.shoplinkamazon a::after{
background-color:#fff;/*マウスオーバー前のアマゾンボタンの背景の色*/
content: '';
position: absolute;
z-index: -1;
}
.shoplinkamazon a:hover{
color:#ffb36b;/*マウスオーバー後のアマゾンボタンの文字の色*/
background-color:#fff;/*マウスオーバー後のアマゾンボタンの背景の色*/
border:solid 2px #ffb36b;/*マウスオーバー後のアマゾンボタンの線の色*/
}
.shoplinkamazon a:after{
height: 100%;
left: -35%;/*left→lightにすると右から左に変化します。*/
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.shoplinkamazon a:hover:after{
height: 100%;
width: 135%;
}おしゃれな楽天ボタンの作り方
.shoplinkrakuten a,.shoplinkrakuten a::after{
/*○○sでアニメーションのスピードを調整*/
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}
.shoplinkrakuten a {
background-color:#ea7373;/*マウスオーバー前の楽天ボタンの背景の色*/
border:solid 2px #ea7373;/*マウスオーバー前の楽天ボタンの線の色*/
position: relative;
display: block;
overflow: hidden;
}
.shoplinkrakuten a::before,.shoplinkrakuten a::after{
background-color:#fff;/*マウスオーバー前の楽天ボタンの文字の色*/
content: '';
position: absolute;
z-index: -1;
}
.shoplinkrakuten a:hover{
color:#ea7373;/*マウスオーバー後の楽天ボタンの文字の色*/
background-color:#fff;/*マウスオーバー後の楽天ボタンの背景の色*/
border:solid 2px #ea7373;/*マウスオーバー後の楽天ボタンの線の色*/
}
.shoplinkrakuten a:after{
height: 0;
left: 50%;
top: 50%;
width: 0;
}
.shoplinkrakuten a:hover:after{
height: 100%;
left: 0;
top: 0;
width: 100%;
}おしゃれなボタンカスタムのまとめ
今回は２種類のカスタマイズを紹介しました。
興味があれば、ぜひコピペをしてくださいね！
コクーンの標準設定で、マウスオーバー時に少し薄くなります。
そこを緩和させたい場合は
このコードを追記してください。（「opacity: 1」にすると今回のカスタマイズの動きがなくなるので注意）
こんにちは
初心者なんですけど、そのコードをどこに入力すればよろしいのでしょうか？
初歩的な質問ですみません！