概要
右向き矢印アイコンを含むリンクボタンです。矢印アイコンを右に配置しつつ、文字はボタンの中央に配置します。
プレビュー
HTML
<a href="#" class="arrowButton">
<span class="arrowButton__text">もっと見る</span>
</a>CSS
※CSS Nesting（SassではなくCSSのネスト）を使用しています。
.arrowButton {
--_icon-arrow: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M268.234,24.08c-22.883-21.777-59.085-20.883-80.861,2c-21.787,22.904-20.894,59.116,2.01,80.883l96.511,91.84H57.202C25.606,198.803,0,224.399,0,256.006c0,31.596,25.606,57.192,57.202,57.192h228.691l-96.511,91.85c-22.904,21.756-23.797,57.979-2.01,80.862c21.776,22.883,57.978,23.798,80.861,2.011L512,256.006L268.234,24.08z"/%3E%3C/svg%3E');
--_color-bg: oklch(0.55 0.18 250);
--_color-text: oklch(1 0 0);
--_color-shadow: oklch(0.55 0.18 250 / 0.2);
--_transition-duration: .2s;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
background-color: var(--_color-bg);
padding: 1em;
color: var(--_color-text);
text-decoration: none;
inline-size: 100%;
border-radius: 3px;
transition: background-color var(--_transition-duration) ease, transform var(--_transition-duration) ease;
&::before {
content: "";
}
&::after {
content: "";
display: block;
justify-self: end;
inline-size: 1em;
block-size: 1em;
margin-inline-start: 0.5em;
background-color: var(--_color-text);
mask: var(--_icon-arrow) no-repeat center/contain;
}
@media (any-hover: hover) {
&:hover {
background-color: color-mix(in oklch, var(--_color-bg) 80%, black);
transform: translateY(-1px);
box-shadow: 0 4px 8px var(--_color-shadow);
}
}
&:focus {
outline: 2px solid var(--_color-bg);
}
&:active {
transform: translateY(0);
&::after {
transform: translateX(0);
}
}
}使用のポイント
ボタンに before および after 擬似要素を追加し、after に矢印アイコンを配置しています。ボタン自体には display: grid を指定し、擬似要素が空白スペースを埋めるように設定しています。これにより、ボタン内のテキストが少ない場合は中央寄せに、多い場合は左寄せのような見た目になります。