پیشنمایش زنده
کد HTML
<button class="button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
viewBox="0 0 24 24"
height="24"
fill="none"
class="svg-icon"
>
<g
stroke-width="2"
stroke-linecap="round"
stroke="#fff"
fill-rule="evenodd"
clip-rule="evenodd"
>
<path
d="m4 9c0-1.10457.89543-2 2-2h2l.44721-.89443c.33879-.67757 1.03131-1.10557 1.78889-1.10557h3.5278c.7576 0 1.4501.428 1.7889 1.10557l.4472.89443h2c1.1046 0 2 .89543 2 2v8c0 1.1046-.8954 2-2 2h-12c-1.10457 0-2-.8954-2-2z"
></path>
<path
d="m15 13c0 1.6569-1.3431 3-3 3s-3-1.3431-3-3 1.3431-3 3-3 3 1.3431 3 3z"
></path>
</g>
</svg>
<span class="lable">Take a Photo</span>
</button>
کد CSS
.button {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1rem;
height: 42px;
min-width: 160px;
border: none;
border-radius: 9999px; /* más fluido que 20px */
background: linear-gradient(135deg, #ff2849, #ff4d6d);
color: #fff;
font-family: "Inter", system-ui, sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.5px;
line-height: 1;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 12px rgba(255, 40, 73, 0.3);
}
.button:hover {
background: linear-gradient(135deg, #ff1c3c, #ff335c);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(255, 40, 73, 0.4);
}
.button:active {
transform: translateY(0);
box-shadow: 0 3px 8px rgba(255, 40, 73, 0.25);
}
.button:focus-visible {
outline: 3px solid rgba(255, 40, 73, 0.6);
outline-offset: 3px;
}
/* Etiqueta dentro del botón */
.label {
font-size: 1rem;
line-height: 1.3;
color: inherit;
user-select: none;
}
/* Efecto icono con animación sutil */
.svg-icon {
width: 20px;
height: 20px;
fill: currentColor;
transition: transform 0.3s ease;
}
.button:hover .svg-icon {
transform: scale(1.15);
animation: pulseGlow 1.5s ease-in-out infinite;
}
/* Nueva animación más suave */
@keyframes pulseGlow {
0%,
100% {
opacity: 1;
filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
}
50% {
opacity: 0.85;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}
}