feedback · succes
Grand panneau de confirmation, pour une page entière (ex: après validation d'une commande ou d'un formulaire).
<style>
.bn-result {
max-width: 360px;
padding: 2.5rem;
text-align: center;
font-family: 'Inter', sans-serif;
background: #0B0F10;
border: 1px solid rgba(230, 228, 221, 0.1);
border-radius: 8px;
}
.bn-result__icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin: 0 auto 1.25rem;
border-radius: 50%;
font-size: 1.4rem;
}
.bn-result__title {
margin: 0 0 0.5rem;
font-size: 1.1rem;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.bn-result__text {
margin: 0 0 1.5rem;
color: #979793;
font-size: 0.85rem;
}
.bn-result__btn {
display: inline-block;
padding: 0.7rem 1.5rem;
border-radius: 999px;
text-decoration: none;
font-size: 0.8rem;
font-weight: 600;
}
.bn-result--success .bn-result__icon {
background: rgba(63, 185, 80, 0.12);
color: #3FB950;
}
.bn-result--success .bn-result__title {
color: #3FB950;
}
.bn-result--success .bn-result__btn {
background: #E6E4DD;
color: #0B0F10;
}
</style>
<div class="bn-result bn-result--success">
<span class="bn-result__icon">✓</span>
<h3 class="bn-result__title">Opération réussie</h3>
<p class="bn-result__text">Votre action a été effectuée avec succès.</p>
<a href="#" class="bn-result__btn">Retour à l'accueil →</a>
</div>