purikounosuke's memo
コピペでOK！WEBパーツまとめ
【コピペで簡単】角丸ボタンのHTML・CSS – くの字（右向き）矢印付き
schedule 2025.10.19
目次
よく使う割に、くの字の矢印の書き方すぐ忘れます…。
HTML
<a class="button_001" href="#">ここを押してね</a>
CSS
.button_001 {
position: relative;
display: block;
width: 80%;
max-width: 300px;
margin: 2rem auto;
padding: 1rem 2.6rem;
text-align: center;
color: #fff;
font-size: 1.1rem;
background-color: #2994b2;
border-radius: 100vh;
line-height: 1.4rem;
transition: 0.5s;
}
.button_001::after {
position: absolute;
content: "";
width: 9px;
height: 9px;
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(45deg);
top: 0;
bottom: 0;
right: 1.6rem;
margin: auto 0;
box-sizing: border-box;
}
.button_001:hover {
opacity: 0.7;
transition: 0.5s;
}
実際の表示
※ここの表示ではリンクを無効化しています。
色・サイズ・向きの変更
コピペでイケるとはいえ、たいていの場合は色とかサイズとか変えたいですよね。以下をご参考に、ご自身のサイトに合うようカスタマイズしてみてください。
ボタンの色を変えたい
.button_001のbackground-colorのカラーコードを変更してください。
例：ボタンの色を黒に変更する場合background-color: #000000;
角の丸みを変えたい
.button_001にborder-radiusを変更してください。
例：角の丸みを10pxにする場合border-radius: 10px;
テキストの色を変えたい
.button_001のcolorのカラーコードを変更してください。
例：テキストの色を黒に変更する場合color: #000000;
テキストのサイズを変えたい
.button_001のfont-sizeを変更してください。
例：テキストのサイズを20pxに変更する場合font-size: 20px;
テキストを太字にしたい
.button_001にfont-weightの指定を追加してください。
例：テキストを太くする場合font-weight: bold;
矢印の色を変えたい
矢印は基本的にテキストの色と同じ色になりますが、テキストとは別の色にしたい場合は、.button_001::afterのborder-topとborder-rightにカラーコードを追記してください。
例：矢印の色を黒にする場合border-top: 2px solid #000;border-right: 2px solid #000;
矢印の太さを変えたい
.button_001::afterのborder-topとborder-rightを変更してください。
例：矢印の太さを4pxにする場合border-top: 4px solidborder-right: 4px solid
矢印を下向きにしたい
.button_001::afterのtransformを変更してください。矢印の角度を変更した後、矢印の上下位置が若干下寄りに見えると思います。気になる場合は、topまたはbottomで調整してみてください。
例：矢印を下向きにする場合transform: rotate(135deg);top: -2px;
ボタンに枠をつけたい
.button_001にoutlineまたはborderの指定を追加してください。
例：ボタンに太さ2pxの黒い枠をつける場合outline: 2px solid #000000;border: 2px solid #000000;
ボタンの横幅を変えたい
.button_001のwidthを変更してください。
例：ボタンの横幅を50%にする場合width: 50%;
ボタンの横幅の最大値を変えたい
.button_001のmax-widthを変更してください。最大値を設定したくない場合は、max-width自体を削除で大丈夫です。
例：ボタンの横幅の最大値を500pxにする場合max-width: 500px;
ボタンの縦幅を変えたい
ボタン内のテキストが改行される可能性がある場合は、.button_001のpaddingの上下の値を変更してください。テキストが改行されない場合は、.button_001のline-heightで調整してみてください。
例：ボタンの縦幅をline-heightで少し広げる場合line-height: 1.5rem;
例：ボタンの縦幅をpaddingで少し狭める場合padding: 0.5rem 2.6rem;