|
Ajout de boutons CSS 3D dans Weebly Implique quelques étapes de personnalisation du code dans la section CSS personnalisée. Voici comment vous pouvez les ajouter à votre site Weebly:
Étape 1:Créez des CSS personnalisés
un. Dans l'éditeur de Weebly, cliquez sur "Paramètres" dans le coin supérieur droit.
b. Sélectionnez "SEO &Code" dans le menu de gauche.
c. Cliquez sur l'onglet "CSSS personnalisé".
d. Collez le code suivant dans le champ CSS personnalisé:
```
.bouton-3d {
affichage :bloc en ligne ;
remplissage :10px 20px;
couleur d'arrière-plan :#000 ;
couleur :#fff ;
alignement du texte :centre ;
décoration de texte :aucune ;
Text-transform:majuscules;
poids de la police :gras ;
Border:2px solide #fff;
}
.button-3d:actif {
transformée:échelle (0,9);
Color en arrière-plan:# 333;
Color à la frontière:# 333;
}
```
Étape 2:styliser votre bouton
un. Dans le code, vous pouvez choisir de modifier diverses options de style pour vos boutons.
- Modifier `` Padding ',' Background-Color ',' Color 'et' Font-Weight 'pour personnaliser l'apparence.
- Modifiez «Border-Color» pour régler la couleur de la bordure autour du bouton.
b. N'hésitez pas à expérimenter les propriétés CSS pour obtenir le look souhaité pour vos boutons.
Étape 3:Ajoutez le bouton à votre site
un. Dans votre éditeur Weebly, ajoutez un élément de texte à l'emplacement souhaité sur votre page.
b. Cliquez sur l'onglet "HTML" dans les paramètres de l'élément de texte.
c. Ajoutez le code HTML suivant, en remplaçant "votre texte" par le texte que vous souhaitez afficher sur le bouton:
```html
Votre texte
```
Étape 4 :Ajuster l'emplacement des boutons
un. Vous pouvez ajuster la position et le style du bouton à l'aide des paramètres de l'élément de texte.
b. Envisagez d'utiliser les options d'alignement pour centrer ou flotter le bouton au besoin.
Étape 5 :Enregistrer et publier
un. Une fois que vous êtes satisfait de l'apparence et du placement de votre bouton, cliquez sur "Enregistrer" pour appliquer les modifications.
b. Aperçu les modifications de votre site.
c. Lorsque vous êtes prêt, cliquez sur "Publier" pour rendre le bouton en direct sur votre site Web.
En suivant ces étapes, vous pouvez facilement ajouter des boutons 3D CSS pour améliorer l'expérience utilisateur et l'esthétique de votre site Web Weebly.
|
