Button
Css
Animation
Ui
Html
Collection de boutons HTML CSS avec effets visuels, animations et variations de styles pour interfaces modernes.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippets Buttons Style 01 | AngularForAll</title>
<style>
/* ========== RESET & BASE ========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
padding: 3rem 2rem;
font-family: 'Segoe UI', 'Inter', system-ui, sans-serif;
color: #e2e8f0;
}
h1 {
font-size: 3.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #fbbf24, #ec4899, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -1px;
text-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
}
.subtitle {
text-align: center;
color: #94a3b8;
margin-bottom: 3rem;
font-size: 1.2rem;
border-bottom: 1px solid #334155;
padding-bottom: 1.5rem;
}
/* ========== GRILLE DE BOUTONS ========== */
.button-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 2rem 1.5rem;
max-width: 1400px;
margin: 0 auto;
}
/* Carte de démonstration */
.btn-card {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 28px;
padding: 2rem 1.2rem 1.8rem;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.5);
transition: transform 0.2s, box-shadow 0.3s;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.btn-card:hover {
transform: translateY(-5px);
box-shadow: 0 30px 45px -12px #00000060;
border-color: rgba(255, 255, 255, 0.15);
}
.btn-title {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.25rem;
color: #f1f5f9;
}
.btn-desc {
font-size: 0.85rem;
color: #94a3b8;
margin-bottom: 1.8rem;
min-height: 2.5rem;
}
/* Conteneur pour centrer le bouton */
.btn-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 90px;
}
/* ========== BASE POUR TOUS LES BOUTONS ========== */
.btn {
--btn-color: #3b82f6;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.8rem 1.8rem;
font-weight: 600;
font-size: 1.05rem;
border-radius: 60px;
border: none;
cursor: pointer;
background: var(--btn-color);
color: white;
text-decoration: none;
transition: all 0.2s ease;
font-family: inherit;
letter-spacing: 0.3px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
border: 2px solid transparent;
position: relative;
overflow: hidden;
white-space: nowrap;
gap: 8px;
}
/* Style par défaut pour éviter les conflits */
.btn i, .btn span {
pointer-events: none;
}
/* ========== 1. BOUTON GRADIENT ANIMÉ ========== */
.btn-1 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-size: 100% 100%;
transition: 0.3s;
}
.btn-1:hover {
background-size: 150% 150%;
background-position: right center;
box-shadow: 0 12px 25px -5px #764ba2;
transform: scale(1.02);
}
/* ========== 2. NEON GLOW (PULSE) ========== */
.btn-2 {
background: transparent;
color: #fbbf24;
border: 2px solid #fbbf24;
box-shadow: 0 0 5px #fbbf24, inset 0 0 5px #fbbf24;
text-shadow: 0 0 8px #fbbf24;
animation: neonPulse 1.8s infinite alternate;
}
.btn-2:hover {
background: #fbbf24;
color: #0f172a;
box-shadow: 0 0 25px #fbbf24, inset 0 0 15px #fde68a;
text-shadow: none;
animation: none;
}
@keyframes neonPulse {
0% { box-shadow: 0 0 3px #fbbf24, inset 0 0 3px #fbbf24; }
100% { box-shadow: 0 0 18px #f59e0b, inset 0 0 10px #fbbf24; }
}
/* ========== 3. RIPPLE EFFECT (pseudo) ========== */
.btn-3 {
background: #10b981;
position: relative;
z-index: 1;
}
.btn-3::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
transform: translate(-50%, -50%);
transition: width 0.4s, height 0.4s;
z-index: -1;
}
.btn-3:hover::after {
width: 300px;
height: 300px;
}
.btn-3:hover {
transform: scale(0.98);
background: #059669;
}
/* ========== 4. BOUTON 3D PRESS ========== */
.btn-4 {
background: #ef4444;
box-shadow: 0 8px 0 #991b1b, 0 8px 15px rgba(0,0,0,0.3);
transform: translateY(0);
transition: all 0.08s linear;
}
.btn-4:hover {
background: #dc2626;
}
.btn-4:active {
transform: translateY(6px);
box-shadow: 0 2px 0 #7f1d1d, 0 5px 12px black;
}
/* ========== 5. BORDURE DÉFILANTE (CONIC) ========== */
.btn-5 {
background: #1e293b;
color: white;
border: 2px solid;
border-image-slice: 1;
border-image-source: conic-gradient(from 0deg, #8b5cf6, #ec4899, #f43f5e, #8b5cf6);
transition: 0.2s;
}
.btn-5:hover {
border-image-source: conic-gradient(from 90deg, #06b6d4, #3b82f6, #a855f7, #06b6d4);
background: #0f172a;
box-shadow: 0 0 25px #8b5cf680;
}
/* ========== 6. SLIDE BACKGROUND (balayage) ========== */
.btn-6 {
background: linear-gradient(120deg, #d946ef 0%, #d946ef 50%, #fdf4ff 50%, #d946ef 100%);
background-size: 250% 100%;
background-position: right bottom;
color: white;
transition: background-position 0.45s ease-out;
border: none;
}
.btn-6:hover {
background-position: left bottom;
color: #4a044e;
}
/* ========== 7. SKEW & BOUNCE ========== */
.btn-7 {
background: #f97316;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-7:hover {
transform: skew(-5deg) scale(1.05);
background: #ea580c;
box-shadow: 10px 10px 0 #7c2d12;
}
/* ========== 8. ICON SLIDE (texte glisse) ========== */
.btn-8 {
background: #0284c7;
padding-right: 2.2rem;
position: relative;
}
.btn-8 .arrow {
position: absolute;
right: 18px;
opacity: 0;
transform: translateX(-10px);
transition: 0.25s;
}
.btn-8:hover {
padding-right: 2.8rem;
background: #0369a1;
}
.btn-8:hover .arrow {
opacity: 1;
transform: translateX(0);
}
.btn-8:hover .btn-text {
transform: translateX(-6px);
display: inline-block;
}
/* ========== 9. SPINNER HOVER ========== */
.btn-9 {
background: #a21caf;
transition: 0.2s;
}
.btn-9 i {
transition: transform 0.4s ease;
}
.btn-9:hover i {
transform: rotate(360deg) scale(1.2);
}
.btn-9:hover {
background: #86198f;
gap: 16px;
}
/* ========== 10. HEARTBEAT (pulse scale) ========== */
.btn-10 {
background: #ec4899;
animation: heartbeat 2s infinite;
transform-origin: center;
}
.btn-10:hover {
animation: none;
background: #be185d;
transform: scale(1.08);
box-shadow: 0 0 20px #f472b6;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
5%, 15% { transform: scale(1.05); }
10% { transform: scale(0.98); }
}
/* ========== 11. BOUTON FANTOME (GLASS) ========== */
.btn-11 {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
box-shadow: 0 8px 20px #00000030;
}
.btn-11:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(14px);
letter-spacing: 2px;
}
/* ========== 12. BORDURE GRADIENT ANIMÉE ========== */
.btn-12 {
background: transparent;
border: 2px solid transparent;
background-clip: padding-box;
position: relative;
color: #cbd5e1;
}
.btn-12::before {
content: "";
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
border-radius: 60px;
z-index: -2;
background-size: 300% 300%;
animation: borderRotate 4s linear infinite;
}
.btn-12::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #0f172a;
border-radius: 58px;
z-index: -1;
}
.btn-12:hover {
color: white;
}
.btn-12:hover::after {
background: #1e293b;
}
@keyframes borderRotate {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ========== 13. UNDERLINE EXPAND ========== */
.btn-13 {
background: transparent;
color: #a78bfa;
box-shadow: none;
border-radius: 0;
padding: 0.8rem 0.2rem;
border-bottom: 2px solid #6b7280;
transition: 0.2s;
}
.btn-13:hover {
border-bottom-width: 5px;
border-bottom-color: #a78bfa;
color: #c4b5fd;
letter-spacing: 1px;
}
/* ========== 14. FLIP 3D TEXT ========== */
.btn-14 {
background: #475569;
transform-style: preserve-3d;
transition: transform 0.3s;
}
.btn-14 span {
display: block;
backface-visibility: hidden;
}
.btn-14::after {
content: "CLIQUÉ !";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
background: #facc15;
color: black;
border-radius: 60px;
transform: rotateX(180deg);
backface-visibility: hidden;
font-weight: bold;
}
.btn-14:hover {
transform: rotateX(180deg);
background: transparent;
box-shadow: none;
}
/* ========== 15. BOUTON SOCIAL SWAP ========== */
.btn-15 {
background: #1da1f2;
padding: 0.8rem 1.2rem;
gap: 5px;
}
.btn-15 .hover-icon {
display: none;
}
.btn-15:hover .default-icon {
display: none;
}
.btn-15:hover .hover-icon {
display: inline-block;
}
.btn-15:hover {
background: #0c7abf;
}
/* ========== 16. SHAKE ANIMATION ========== */
.btn-16 {
background: #b45309;
}
.btn-16:hover {
animation: shake 0.5s ease-in-out;
background: #92400e;
}
@keyframes shake {
0%,100% { transform: translateX(0); }
20% { transform: translateX(-8px); }
40% { transform: translateX(8px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
/* ========== 17. MORPHING SHAPE ========== */
.btn-17 {
background: #047857;
border-radius: 12px;
transition: border-radius 0.3s, background 0.2s;
}
.btn-17:hover {
border-radius: 40px 8px 40px 8px;
background: #065f46;
}
/* ========== 18. FLOATING (animation continue) ========== */
.btn-18 {
background: #7c3aed;
animation: float 3s ease-in-out infinite;
}
.btn-18:hover {
animation-play-state: paused;
background: #6d28d9;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-8px); box-shadow: 0 18px 20px -5px #00000080; }
100% { transform: translateY(0px); }
}
/* ========== 19. EXPLOSION DE POINTS (pseudo elements) ========== */
.btn-19 {
background: #dc2626;
position: relative;
}
.btn-19::before, .btn-19::after {
content: "";
position: absolute;
width: 8px; height: 8px;
border-radius: 50%;
background: #fca5a5;
opacity: 0;
transition: 0.25s;
}
.btn-19::before { top: -5px; left: 10%; }
.btn-19::after { bottom: -5px; right: 10%; }
.btn-19:hover::before {
opacity: 1;
top: -12px;
left: 5%;
box-shadow: 20px 0 0 #f87171, 40px 0 0 #fca5a5;
}
.btn-19:hover::after {
opacity: 1;
bottom: -12px;
right: 5%;
box-shadow: -20px 0 0 #f87171, -40px 0 0 #fca5a5;
}
.btn-19:hover {
background: #b91c1c;
}
/* ========== 20. DOUBLE COUCHE (shadow expand) ========== */
.btn-20 {
background: #334155;
box-shadow: 0 0 0 0 #38bdf8;
transition: box-shadow 0.25s, background 0.2s;
}
.btn-20:hover {
box-shadow: 0 0 0 6px #38bdf880, 0 0 20px #0ea5e9;
background: #0f172a;
}
/* Responsive */
@media (max-width: 640px) {
body { padding: 1.5rem 1rem; }
h1 { font-size: 2.4rem; }
.button-grid { grid-template-columns: 1fr; }
.btn { font-size: 1rem; padding: 0.7rem 1.4rem; }
}
</style>
</head>
<body>
<h1>✨ 20 Boutons Magiques</h1>
<div class="subtitle">Effets · Animations · Hover · Pure CSS</div>
<div class="button-grid">
<!-- 1 -->
<div class="btn-card">
<div class="btn-title">Gradient Shift</div>
<div class="btn-desc">Dégradé qui s'étire au survol</div>
<div class="btn-wrapper"><button class="btn btn-1">Découvrir</button></div>
</div>
<!-- 2 -->
<div class="btn-card">
<div class="btn-title">Neon Pulse</div>
<div class="btn-desc">Lueur néon pulsante</div>
<div class="btn-wrapper"><button class="btn btn-2">Activer</button></div>
</div>
<!-- 3 -->
<div class="btn-card">
<div class="btn-title">Ripple Expand</div>
<div class="btn-desc">Vague circulaire au clic/hover</div>
<div class="btn-wrapper"><button class="btn btn-3">Appuyer</button></div>
</div>
<!-- 4 -->
<div class="btn-card">
<div class="btn-title">3D Press</div>
<div class="btn-desc">Effet d'enfoncement réaliste</div>
<div class="btn-wrapper"><button class="btn btn-4">Pousser</button></div>
</div>
<!-- 5 -->
<div class="btn-card">
<div class="btn-title">Conic Border</div>
<div class="btn-desc">Bordure conique changeante</div>
<div class="btn-wrapper"><button class="btn btn-5">Explorer</button></div>
</div>
<!-- 6 -->
<div class="btn-card">
<div class="btn-title">Slide Bg</div>
<div class="btn-desc">Fond qui glisse</div>
<div class="btn-wrapper"><button class="btn btn-6">Glisser</button></div>
</div>
<!-- 7 -->
<div class="btn-card">
<div class="btn-title">Skew & Bounce</div>
<div class="btn-desc">Inclinaison + rebond</div>
<div class="btn-wrapper"><button class="btn btn-7">Pencher</button></div>
</div>
<!-- 8 -->
<div class="btn-card">
<div class="btn-title">Icon Slide</div>
<div class="btn-desc">Flèche apparaît en glissant</div>
<div class="btn-wrapper"><button class="btn btn-8"><span class="btn-text">Suite</span> <span class="arrow">→</span></button></div>
</div>
<!-- 9 -->
<div class="btn-card">
<div class="btn-title">Spinner Icon</div>
<div class="btn-desc">Icône tourne sur elle-même</div>
<div class="btn-wrapper"><button class="btn btn-9"><i>⚡</i> Actualiser</button></div>
</div>
<!-- 10 -->
<div class="btn-card">
<div class="btn-title">Heartbeat</div>
<div class="btn-desc">Battement continu</div>
<div class="btn-wrapper"><button class="btn btn-10">❤️ Like</button></div>
</div>
<!-- 11 -->
<div class="btn-card">
<div class="btn-title">Glassmorphism</div>
<div class="btn-desc">Flou d'arrière-plan</div>
<div class="btn-wrapper"><button class="btn btn-11">Vitre</button></div>
</div>
<!-- 12 -->
<div class="btn-card">
<div class="btn-title">Animated Border</div>
<div class="btn-desc">Bordure multicolore tournante</div>
<div class="btn-wrapper"><button class="btn btn-12">Arc-en-ciel</button></div>
</div>
<!-- 13 -->
<div class="btn-card">
<div class="btn-title">Underline Grow</div>
<div class="btn-desc">Soulignement épais</div>
<div class="btn-wrapper"><button class="btn btn-13">Lire plus</button></div>
</div>
<!-- 14 -->
<div class="btn-card">
<div class="btn-title">3D Flip</div>
<div class="btn-desc">Retournement 3D du texte</div>
<div class="btn-wrapper"><button class="btn btn-14"><span>Envoyer</span></button></div>
</div>
<!-- 15 -->
<div class="btn-card">
<div class="btn-title">Icon Swap</div>
<div class="btn-desc">Échange d'icône au survol</div>
<div class="btn-wrapper"><button class="btn btn-15"><span class="default-icon">🐦</span><span class="hover-icon">💬</span> Tweet</button></div>
</div>
<!-- 16 -->
<div class="btn-card">
<div class="btn-title">Shake</div>
<div class="btn-desc">Secousse horizontale</div>
<div class="btn-wrapper"><button class="btn btn-16">⚠️ Alerte</button></div>
</div>
<!-- 17 -->
<div class="btn-card">
<div class="btn-title">Morphing</div>
<div class="btn-desc">Forme qui mute</div>
<div class="btn-wrapper"><button class="btn btn-17">Transformer</button></div>
</div>
<!-- 18 -->
<div class="btn-card">
<div class="btn-title">Floating</div>
<div class="btn-desc">Lévitation continue</div>
<div class="btn-wrapper"><button class="btn btn-18">☁️ Flotter</button></div>
</div>
<!-- 19 -->
<div class="btn-card">
<div class="btn-title">Particles</div>
<div class="btn-desc">Points étoilés</div>
<div class="btn-wrapper"><button class="btn btn-19">Éclater</button></div>
</div>
<!-- 20 -->
<div class="btn-card">
<div class="btn-title">Ring Expand</div>
<div class="btn-desc">Anneau lumineux</div>
<div class="btn-wrapper"><button class="btn btn-20">Pulse ring</button></div>
</div>
</div>
<!-- Ligne de séparation décorative -->
<div style="margin-top: 4rem; text-align: center; opacity: 0.5; font-size: 0.9rem; color: #64748b;">
<hr style="border-color: #334155; margin-bottom: 1rem;">
<p>⚡ Tous les boutons sont interactifs — survolez, cliquez ! ⚡</p>
</div>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur