پیشنمایش زنده
کد HTML
<div class="notifications-container">
<div class="success">
<div class="flex">
<div class="flex-shrink-0">
<svg
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="success-svg"
>
<path
clip-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
fill-rule="evenodd"
></path>
</svg>
</div>
<div class="success-prompt-wrap">
<p class="success-prompt-heading">
Order completed
<span class="checkmark">✓</span>
</p>
<div class="success-prompt-prompt">
<p>
You're happy now? Does this impulsive action is really going to
satisfy you? Don't answer me, answer yourself. Anyway, your
party-size pizza combo is on it's way.
</p>
</div>
<div class="success-button-container">
<button class="success-button-main" type="button">View status</button>
<button class="success-button-secondary" type="button">
Dismiss
</button>
</div>
</div>
</div>
</div>
</div>
کد CSS
.notifications-container {
width: 320px;
height: auto;
font-size: 0.875rem;
line-height: 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
animation: slideIn 0.4s ease-out;
}
.flex {
display: flex;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.success {
padding: 1.25rem;
border-radius: 0.75rem;
background-color: rgb(240 253 244);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 1px solid rgba(74, 222, 128, 0.2);
}
.success:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.success-svg {
color: rgb(74 222 128);
width: 1.5rem;
height: 1.5rem;
filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.4));
animation: pulse 2s infinite;
}
.success-prompt-wrap {
margin-left: 1rem;
}
.success-prompt-heading {
font-weight: 700;
color: rgb(22 101 52);
font-size: 1.05rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.checkmark {
color: rgb(74 222 128);
animation: scaleCheck 0.3s ease-in-out;
}
.success-prompt-prompt {
margin-top: 0.75rem;
color: rgb(21 128 61);
line-height: 1.5;
}
.success-button-container {
display: flex;
margin-top: 1rem;
gap: 0.75rem;
}
.success-button-main {
padding: 0.5rem 1rem;
background-color: rgb(22 101 52);
color: white;
font-size: 0.875rem;
font-weight: 600;
border-radius: 0.5rem;
border: none;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(22, 101, 52, 0.2);
}
.success-button-main:hover {
background-color: rgb(21 128 61);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(22, 101, 52, 0.3);
}
.success-button-secondary {
padding: 0.5rem 1rem;
background-color: rgb(240 253 244);
color: rgb(22 101 52);
font-size: 0.875rem;
font-weight: 600;
border-radius: 0.5rem;
border: 1px solid rgba(22, 101, 52, 0.2);
transition: all 0.2s ease;
}
.success-button-secondary:hover {
background-color: rgb(220, 243, 234);
border-color: rgba(22, 101, 52, 0.3);
transform: translateY(-1px);
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes scaleCheck {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/* Dodajemy efekt ripple dla przycisków */
.success-button-main:active,
.success-button-secondary:active {
transform: scale(0.95);
}