💌 📖
Skip to main content

Basque CTAs

@import url(‘https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Inter:wght@500;600&display=swap’);

body {
margin: 0;
padding: 40px 20px;
background: #0d0d0d;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
font-family: ‘Inter’, sans-serif;
}

.cta-wrapper {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}

/* Shared button base */
.bdsm-cta {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-width: 260px;
padding: 18px 32px;
font-family: ‘Cinzel’, serif;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
color: #f5e6e0;
background: linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 100%);
border: 2px solid #8b0000;
border-radius: 4px;
box-shadow:
0 0 0 1px rgba(139, 0, 0, 0.3),
0 8px 20px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
overflow: hidden;
cursor: pointer;
}

.bdsm-cta::before {
content: ”;
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 40%, rgba(139, 0, 0, 0.15) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}

.bdsm-cta:hover {
color: #fff;
border-color: #c41e3a;
background: linear-gradient(145deg, #2a0a0a 0%, #1a0000 100%);
box-shadow:
0 0 0 1px rgba(196, 30, 58, 0.5),
0 0 25px rgba(196, 30, 58, 0.4),
0 12px 28px rgba(0, 0, 0, 0.7),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transform: translateY(-3px);
}

.bdsm-cta:hover::before {
opacity: 1;
}

.bdsm-cta:active {
transform: translateY(0);
box-shadow:
0 0 0 1px rgba(196, 30, 58, 0.4),
0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Icon styling */
.cta-icon {
font-size: 1.3rem;
line-height: 1;
}

/* Website button accent */
.cta-web {
border-color: #8b0000;
}

/* Phone button accent */
.cta-phone {
border-color: #a52a2a;
}

.cta-phone:hover {
border-color: #dc143c;
}

/* Subtle chain-link texture on hover (pure CSS) */
.bdsm-cta::after {
content: ”;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.08),
transparent
);
transition: left 0.5s ease;
}

.bdsm-cta:hover::after {
left: 100%;
}

Basque

Author Basque

More posts by Basque

Leave a Reply