Pocketボタン
Pocketのボタンを自作する際のサンプルです。
Pocket
Source Code
右上の「コピー」からご利用ください。
コピー
<div class="my-parts">Pocket</div>
コピー
.my-parts {
display: inline-block;
padding: .6em 2em .6em 2.5em;
margin: 0 0 .4em;
background-color: #EE4056;
color: #fff;
font-size: 16px;
cursor: pointer;
position: relative;
}
.my-parts::after {
position: absolute;
content: '\f265';
font-family: 'Font Awesome 5 Brands';
font-weight: 400;
top: 50%;
left: .5em;
transform: translateY(-50%);
font-size: 1.2em;
}