AmazonっぽいボタンをCSSを駆使して作りましょう！コピペフリーのコード付き。作るためのテンプレートです。
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;
width: fit-content;
height: 31px;
padding: 0 11px;
min-width: 100px;
color: #0F1111;
text-decoration: none;
}
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>
<style type="text/css">
a.amazon-button{
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;
width: fit-content;
height: 31px;
padding: 0 11px;
min-width: 100px;
color: #0F1111;
text-decoration: none;
}
a.amazon-button:hover{
background: #F7CA00;
border-color: #F2C200;
box-shadow: 0 2px 5px 0 rgb(213 217 217 / 50%);
}
a.amazon-button > p {
display: block;
margin: auto;
font-weight: 500;
font-size: 13px;
}
</style>
<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>上手くいけばこんなボタンが表示されるはずです。いい感じに使ってやってください。
