AmazonっぽいボタンをCSSを駆使して作りましょう！コピペフリーのコード付き。作るためのテンプレートです。
Amazonほしいものリスト(支援用)
Contents
……の前に、私信です
ちょっと前の更新ですが、サイドバー（モバイルの方はページ最下部）の私のプロフィール欄にAmazonのほしいものリストを公開しました！ 不特定多数の方に閲覧可能なように活動支援用と位置付けていますが、例によって誕生日とかでも使っていただけます（宛先は一緒です）。よろしくお願いします！
ボドゲがいっぱい入っていますが、頂けたらそのままレビューします。こんな感じで。
何かにつけて気軽にモノを贈り贈られできる仲は貴重です。大事にしたいですね。
AmazonっぽいボタンをCSSで作る
amazonといえば濃い黄色に黒のあのカラーリングを思い浮かべると思います。
「カートに入れる」ボタンあたりが特に象徴的ですので、あのボタンを真似していかにもAmazonだと見てわかるボタンを作りましょう。
<a href="[[URL of your amazon wish list]]" target="_blank"
rel="noopener noreferrer" class="amazon-button">
<p>Amazonほしいものリスト</p>
</a>a.amazon{
display: flex;
align-content: center;
justify-content: center;
cursor: pointer;
border-radius: 999px;
box-shadow: 0 2px 5px 0 rgb(213 217 217 / 50%);
background: #FFD814;
border: 1px solid #FCD200;
height: 31px;
padding: 0 11px;
min-width: 100px;
color: #0F1111;
}
a.amazon:hover{
background: #F7CA00;
border-color: #F2C200;
box-shadow: 0 2px 5px 0 rgb(213 217 217 / 50%);
}
a.amazon > p {
display: block;
margin: auto;
font-weight: 500;
font-size: 13px;
}このコードで下のようなボタンができます。
Amazonほしいものリスト(支援用)
サイズとかはサイトのレイアウトに合わせて適宜変更しましょう。
Amazonロゴをくっつける
文字だけのボタンよりもロゴが入っていた方がよりそれっぽいです。
フリーでロゴマークを使えるサービスを利用して、ボタンにロゴを入れちゃいましょう。
webサイトにちゃんと導入する場合
ionicons を導入して、SNSロゴマークをフリーで使えるようにしましょう。
↓↓導入方法はこちらをご覧ください↓↓
めんどくさいので全部インラインで作ってしまう場合
ずぼらなあなたのために、丸ごと放り込むだけでAmazonボタンになるコードも用意しました。
<script type="text/javascript" src="https://unpkg.com/ionicons@5.2.3/dist/ionicons.js"></script>
<a href="https://www.amazon.jp/hz/wishlist/ls/1FEHW38KUSHIH?ref_=wl_share" target="_blank" rel="noopener noreferrer" class="amazon-button">
<p><ion-icon name="logo-amazon" style="vertical-align: middle; font-size: 1.4em; margin: 0 0.2em;"></ion-icon>
ほしいものリスト(支援用)
</p></a>上手くいけばこんなボタンが表示されるはずです。いい感じに使ってやってください。
