<!-- Plain button -->
<button>Add</button>
<!-- Button with SVG icon -->
<button>
<svg viewBox="0 0 448 512" width="100" title="plus">
<path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" />
</svg>
Add
</button>
button:has(svg) {
align-items: center;
border: 1px solid #ff000055;
background: #ff0000;
color: #fff;
display: flex;
gap: 0.5rem;
padding: 0.25rem 0.5rem;
}
/* Presentational styles */
body {
align-items: center;
display: flex;
gap: 1rem;
height: 100dvh;
justify-content: center;
}
svg {
fill: #fff;
width: 0.75rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.