Buttons

Pay Over Time Button Pay Over Time Use Affirm, Zip, or Klarna if approved

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pay Over Time Button</title>
<style>
.flex-pay-btn,
.flex-pay-btn:link,
.flex-pay-btn:visited,
.flex-pay-btn:hover,
.flex-pay-btn:focus,
.flex-pay-btn:active {
text-decoration: none;
color: #ffffff;
}

.flex-pay-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: 100%;
max-width: 560px;
min-height: 92px;
padding: 18px 24px;
box-sizing: border-box;
border-radius: 24px;
border: 2px solid #caa24a;
background:
radial-gradient(circle at top left, rgba(255, 214, 120, 0.10), transparent 34%),
radial-gradient(circle at bottom right, rgba(255, 214, 120, 0.07), transparent 28%),
linear-gradient(145deg, #162235 0%, #0f1724 58%, #0a1018 100%);
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.26),
0 0 0 2px rgba(202, 162, 74, 0.14),
0 0 18px rgba(202, 162, 74, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.10),
inset 0 -4px 10px rgba(0, 0, 0, 0.18);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
position: relative;
overflow: hidden;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
-webkit-tap-highlight-color: transparent;
user-select: none;
cursor: pointer;
}

.flex-pay-btn::before {
content: "";
position: absolute;
top: 0;
left: -65%;
width: 42%;
height: 100%;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.14) 50%,
transparent 100%
);
transform: skewX(-20deg);
transition: left 0.7s ease;
pointer-events: none;
}

.flex-pay-btn:hover {
transform: translateY(-2px);
border-color: #ddb760;
box-shadow:
0 14px 30px rgba(0, 0, 0, 0.30),
0 0 0 2px rgba(202, 162, 74, 0.18),
0 0 22px rgba(202, 162, 74, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -4px 10px rgba(0, 0, 0, 0.20);
}

.flex-pay-btn:hover::before {
left: 130%;
}

.flex-pay-btn:focus,
.flex-pay-btn:focus-visible {
outline: none;
border-color: #e4c878;
box-shadow:
0 0 0 4px rgba(202, 162, 74, 0.22),
0 14px 30px rgba(0, 0, 0, 0.30),
0 0 22px rgba(202, 162, 74, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -4px 10px rgba(0, 0, 0, 0.20);
}

.flex-pay-btn:active {
transform: scale(0.985);
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.24),
0 0 0 4px rgba(202, 162, 74, 0.16),
inset 0 2px 8px rgba(0, 0, 0, 0.24);
}

.flex-pay-btn .icon,
.flex-pay-btn .arrow {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: #f2d68a;
}

.flex-pay-btn .icon svg,
.flex-pay-btn .arrow svg {
display: block;
width: 34px;
height: 34px;
fill: currentColor;
}

.flex-pay-btn .divider {
width: 2px;
height: 46px;
border-radius: 999px;
background: linear-gradient(to bottom, rgba(242, 214, 138, 0.95), rgba(202, 162, 74, 0.65));
box-shadow: 0 0 10px rgba(202, 162, 74, 0.20);
flex: 0 0 auto;
}

.flex-pay-btn .text-wrap {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
min-width: 0;
}

.flex-pay-btn .main-text {
display: block;
color: #ffffff;
font-size: clamp(22px, 3vw, 30px);
line-height: 1.05;
font-weight: 800;
letter-spacing: 0.35px;
text-transform: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
}

.flex-pay-btn .helper-text {
display: block;
margin-top: 6px;
color: rgba(255, 255, 255, 0.84);
font-size: clamp(12px, 1.8vw, 14px);
line-height: 1.35;
font-weight: 500;
text-transform: none;
letter-spacing: 0.2px;
}

.flex-pay-btn .arrow {
opacity: 0.92;
transition: transform 0.22s ease, opacity 0.22s ease;
}

.flex-pay-btn:hover .arrow {
transform: translateX(2px);
opacity: 1;
}

@media (max-width: 640px) {
.flex-pay-btn {
min-height: 84px;
padding: 16px 18px;
gap: 12px;
border-radius: 20px;
}

.flex-pay-btn .icon svg,
.flex-pay-btn .arrow svg {
width: 28px;
height: 28px;
}

.flex-pay-btn .divider {
height: 38px;
}

.flex-pay-btn .main-text {
font-size: clamp(20px, 6vw, 26px);
}

.flex-pay-btn .helper-text {
font-size: 12px;
}
}
</style>
</head>
<body style="background:#f4ecdc; padding:40px; font-family:Arial, sans-serif;">

<span class="text-wrap">
<span class="main-text">Pay Over Time</span>
<span class="helper-text">Use Affirm, Zip, or Klarna if approved</span>
</span>

</body>
</html>