Comment faire un joli bouton HTML / CSS
J'ai demandé a DeepSeek de me faire un joli bouton HTML / CSS. Le bouton est créé avec la balise <p>. Explication : HTML : Le bouton est créé avec la balise <p>. La classe mon-bouton est ajoutée pour le styliser. CSS : Applique des styles de base comme la couleur de fond, la taille du texte, les coins arrondis, etc. ..mon-bouton:hover: Change la couleur de fond lorsque l'utilisateur survole le bouton. Vous pouvez personnaliser ces styles selon vos besoins pour créer un bouton qui correspond à votre design.
HTML
Code HTML à coller ou vous pouvez juste après <body>
<p class="mon-bouton">
<a href="/article/tutoriel-filezilla">Joli bouton HTML / CSS</a>
</p>CSS
Le code CSS à coller dans votre feuille de styles
/* Variables CSS globales */
:root {
/* Espacements */
--spacing-lg: 1.25rem;
--spacing-xl: 1.5rem;
/* Bordures */
--border-radius-sm: 7px;
--border-radius-lg: 10px;
/* Variables couleurs */
--bouton-color: #333333 ; /* Gris foncé */
--bouton-color-hover: #B22222 ; /* Firebrick (Fire Brick) / #b22222 Hex Code Couleur */
}
/* Bouton */
.mon-bouton {
background-color: var(--bouton-color);
color: #e0e0e0;
padding: var(--spacing-lg) var(--spacing-xl);
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1.3em;
margin: 3px 2px;
cursor: pointer;
border: none;
border-radius: var(--border-radius-sm);
transition: background-color var(--transition-default);
}
.mon-bouton a {
color: white;
text-decoration: none
}
.mon-bouton a:hover,
.mon-bouton a:active,
.mon-bouton a:visited {
color: white;
text-decoration: none;
}
.mon-bouton:hover {
background-color: var(--bouton-color-hover);
}
.mon-bouton:active {
background-color: var(--bouton-color-active);
}
