CSS
.btn-fortune {
position: relative;
padding: 16px 36px;
border: none;
background: #f5ead0;
color: #3a2410;
font-family: ui-serif, Georgia, serif;
font-size: 13px; font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
box-shadow: 0 4px 12px rgba(58,36,16,0.25);
transition: transform 0.25s cubic-bezier(.3,1.2,.3,1);
}
.btn-fortune-fold {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(58,36,16,0.18) 100%);
pointer-events: none;
}
.btn-fortune-strip {
position: absolute;
bottom: 0; left: 50%;
width: 4px; height: 32%;
background: #a83232;
transform: translateX(-50%);
}
.btn-fortune-text { position: relative; z-index: 1; }
.btn-fortune:hover {
transform: translateY(-2px) rotate(-2deg);
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}