矢印付きのアローボタン
矢印付きのボタンです。ボタンであることが視覚的に分かりやすくなります。好みやサイトのデザインに合わせてアイコンは変更してみてください。
ボタン
Source Code
右上の「コピー」からご利用ください。
コピー
<div class="my-parts">ボタン</div>コピー
.my-parts {
display: inline-block;
padding: .6em 2.5em .6em 2em;
margin: 0 0 1em;
background-color: #4CAF50;
color: #fff;
font-size: 16px;
cursor: pointer;
position: relative;
}
.my-parts::after {
position: absolute;
content: '\f061';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
top: 50%;
right: .4em;
left: auto;
bottom: auto;
transform: translateY(-50%);
}
