How one little change can make a huge impact to you design, check out how the CSS code brings this button to life.
Code Used:
/* ===============================
LUXURY RED GRADIENT BUTTON
Use class: .lux-red-btn
=============================== */
.lux-red-btn {
display: inline-block;
padding: 14px 34px;
border-radius: 999px;
background: linear-gradient(
90deg,
#8b0d0d 0%,
#c81e1e 35%,
#e03131 50%,
#c81e1e 65%,
#8b0d0d 100%
);
color: #ffffff !important;
font-weight: 700;
letter-spacing: .4px;
text-decoration: none;
border: none;
cursor: pointer;
box-shadow:
0 10px 25px rgba(200,30,30,.45),
inset 0 1px 2px rgba(255,255,255,.25);
transition: all .35s ease;
position: relative;
overflow: hidden;
}
/* SOFT SATIN SHINE */
.lux-red-btn::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
rgba(255,255,255,.18),
rgba(255,255,255,0) 60%
);
opacity: .6;
pointer-events: none;
}
/* HOVER EFFECT */
.lux-red-btn:hover {
transform: translateY(-2px);
box-shadow:
0 16px 40px rgba(200,30,30,.65),
0 0 20px rgba(255,215,0,.45);
}
/* ACTIVE PRESS */
.lux-red-btn:active {
transform: translateY(0);
box-shadow:
0 8px 18px rgba(200,30,30,.55);
}
