カエレバ・ヨメレバのボタンの、カスタマイズCSS

こちらも、色々と参照させていただいて
このブログでCSS追記している
カエレバ・ヨメレバのボタンCSSのメモです。

こんな感じのボタンです。

スクリーンショット 2015-09-26 11.30.13

ボタンの色や幅、高さなどを
少しずつ変えているので、
もう一度、いちから作れと言われると面倒なので
こちらにもメモしておきます。

基本のスタイルシート、モバイル、スマホと
3シートに書き込んでいます。

これを書き込んだ上で、ブックマークレットを使うと
自動的にPC/スマホともに変換されているはずです。

※ポチレバ、は使っていませんが
一応入ってます。

/*—————————–
カエレバのカスタマイズ
——————————*/
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkkindle,
.pochi_name {
display : inline-block!important ;
text-align : center!important ;
margin : 0 0.5em 0.7em 0!important ;
padding : 0!important ;
line-height : 1.5!important ;
border-radius : 5px!important ;
-webkit-border-radius : 5px!important ;
-moz-border-radius : 5px!important ;
box-shadow : 0px 2px 2px #333, 0 3px 8px #999!important ;
-webkit-box-shadow : 0px 2px 2px #333, 0 3px 8px #999!important ;
-moz-box-shadow : 0px 2px 2px #333, 0 3px 8px #999!important ; 
  border-color:#808080;
}

.pochi_name {
display : block!important ;
letter-spacing : 0!important ;
color : #fff!important ;
font-size : 65%!important ;
padding-top : 1em!important ;
background : -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #737373), color-stop(0.48, #4a4545), color-stop(0.54, #454545), color-stop(0.54, #454545), color-stop(0.01, #c9c5c5), color-stop(0.00, #e3e2e1), color-stop(0.00, #e3e2e1), color-stop(0.00, #e3e2e1))!important ;
background : -webkit-linear-gradient(top, #e3e2e1 0%, #e3e2e1 0%, #e3e2e1 0%, #c9c5c5 1%, #454545 54%, #454545 54%, #4a4545 48%, #737373 100%)!important ;
background : -moz-linear-gradient(top, #e3e2e1 0%, #e3e2e1 0%, #e3e2e1 0%, #c9c5c5 1%, #454545 54%, #454545 54%, #4a4545 48%, #737373 100%)!important ;
background : -o-linear-gradient(top, #e3e2e1 0%, #e3e2e1 0%, #e3e2e1 0%, #c9c5c5 1%, #454545 54%, #454545 54%, #4a4545 48%, #737373 100%)!important ;
background : -ms-linear-gradient(top, #e3e2e1 0%, #e3e2e1 0%, #e3e2e1 0%, #c9c5c5 1%, #454545 54%, #454545 54%, #4a4545 48%, #737373 100%)!important ;
background : linear-gradient(to bottom, #e3e2e1 0%, #e3e2e1 0%, #e3e2e1 0%, #c9c5c5 1%, #454545 54%, #454545 54%, #4a4545 48%, #737373 100%)!important ;
}

.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkkindle a,
.pochi_name a {
display : inline-block!important ;
color : #fff!important ;
text-decoration : none!important ;
text-shadow : -1px -1px 0px rgba(0, 0, 0, 1)!important ;
}

.shoplinkamazon a:hover,
.shoplinkrakuten a:hover,
.shoplinkkindle a:hover {
background : gray!important ;
border-radius : 5px!important ;
-webkit-border-radius : 5px!important ;
-moz-border-radius : 5px!important ;
}

/* カエレバ Amazon */

.kaerebalink-box .shoplinkamazon {
letter-spacing : 0.2em!important ;
background : #292929!important ;
}

.kaerebalink-box .shoplinkamazon a {
padding : 0.9em 2em!important ;
}

/* カエレバ 楽天 */

.kaerebalink-box .shoplinkrakuten {
letter-spacing : 0.55em!important ;
background : #BD0000!important ;
}

.kaerebalink-box .shoplinkrakuten a {
padding : 0.9em 1.6em!important ;
}

/* ヨメレバ Amazon */

.booklink-box .shoplinkamazon {
letter-spacing : 0.2em!important ;
background : #292929!important ;
}

.booklink-box .shoplinkamazon a {
padding : 0.9em 2em!important ;
}

/* ヨメレバ 楽天 */
.booklink-box .shoplinkrakuten {
letter-spacing : 0!important ;
background : #BD0000!important ;
}

.booklink-box .shoplinkrakuten a {
padding : 0.9em 1.73em!important ;
}

/* ヨメレバ Kindle */
.booklink-box .shoplinkkindle {
letter-spacing : 0.36em!important ;
background : #e47911!important ;
}

.booklink-box .shoplinkkindle a {
padding : 0.9em 2em!important ;
}

/* ポチレバ */

.pochi_name a {
display : block!important ;
padding : 0.3em 5% 0.5em 5%!important ;
font-size : 190%!important ;
}

.pochi_name a:hover {
background : none ;
}

.pochi_name:hover {
background : -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c7c7c7), color-stop(0.48, #575757), color-stop(0.48, #575757), color-stop(0.00, #7a7a7a))!important ;
background : -webkit-linear-gradient(top, #7a7a7a 0%, #575757 48%, #575757 48%, #c7c7c7 100%)!important ;
background : -moz-linear-gradient(top, #7a7a7a 0%, #575757 48%, #575757 48%, #c7c7c7 100%)!important ;
background : -o-linear-gradient(top, #7a7a7a 0%, #575757 48%, #575757 48%, #c7c7c7 100%)!important ;
background : -ms-linear-gradient(top, #7a7a7a 0%, #575757 48%, #575757 48%, #c7c7c7 100%) ;
background : linear-gradient(to bottom, #7a7a7a 0%, #575757 48%, #575757 48%, #c7c7c7 100%)!important ;
}

.pochi_name:before {
content : “今すぐダウンロード!” ;
display : block ;
font-size : 160% ;
color : yellow ;
text-shadow : -1px -1px 0px rgba(108, 106, 106, 1) ;

}

興味がある方はこちらのブログもどうぞ。

にほんブログ村 ライフスタイルブログ シンプルライフへ にほんブログ村 インテリアブログ 北欧インテリアへ

コメントをどうぞ

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