Glass Shard
Obsidian shard with a faceted clip-path; magenta and cyan refract through the cuts on hover.
Glass Shard the 26th of 43 designs in the 43 CSS Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button class="btn-shard"> <span class="btn-shard-text">Activate</span> </button>
.btn-shard {
position: relative;
padding: 14px 36px;
border: none;
background:
linear-gradient(115deg,
#0e0e1a 0%,
#ff3d8c 30%,
#0e0e1a 50%,
#00d4ff 70%,
#0e0e1a 100%);
background-size: 240% 100%;
background-position: 0% 50%;
color: #fff;
font-family: ui-sans-serif, system-ui;
font-size: 14px; font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
box-shadow: 0 6px 18px rgba(0,212,255,0.25), 0 6px 18px rgba(255,61,140,0.25);
transition: background-position 0.6s cubic-bezier(.3,1,.3,1), transform 0.2s;
}
.btn-shard-text { position: relative; }
.btn-shard:hover {
background-position: 100% 50%;
transform: translateY(-2px);
}