43 CSS Button Designs 26 / 43
Glass Shard
Obsidian shard with a faceted clip-path; magenta and cyan refract through the cuts on hover.
The code
<button class="btn-shard"> <span class="btn-shard-text">Activate</span> </button>
<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);
} .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);
}