Overview
A link button that includes a right-pointing arrow icon. The arrow icon is positioned on the right side while the text is centered in the button.
Preview
HTML
<a href="#" class="arrowButton">
<span class="arrowButton__text">Read more</span>
</a>CSS
※Uses CSS Nesting (native CSS nesting, not Sass).
.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);
}
}
}Usage Points
The button uses before and after pseudo-elements, with the arrow icon placed in the after element. The button itself uses display: grid, and the pseudo-elements are configured to fill empty space. This results in centered text when the button text is short, and left-aligned appearance when the text is longer.