TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment ajouter des boutons de pression CSS 3D dans Weebly ?

15

Dans notre article précédent, nous avons vu comment ajouter et personnaliser l’élément de bouton Weebly par défaut. Bien qu’il soit possible de modifier les boutons, la modification du style de bouton existant est une tâche compliquée et ne fonctionnera souvent pas comme prévu. La solution simple consiste à intégrer votre propre CSS/HTML personnalisé à l’aide de l’élément de code d’intégration Weebly. Vous n’obtiendrez pas les options de personnalisation lors de l’intégration, mais vous pouvez facilement créer des boutons attrayants avec des effets CSS. Nous expliquons ici comment ajouter des boutons de pression CSS 3D dans le site Weebly.

Boutons de presse CSS 3D

Voici à quoi ressembleront les boutons de pression 3D.

Comment ajouter des boutons de pression CSS 3D dans Weebly ?

Les boutons ont les caractéristiques suivantes :

  • Aucune image n’est requise, ce qui améliore la vitesse de chargement du site et vos efforts consacrés à la création d’images.
  • Les couleurs et les styles sont facilement personnalisables pour s’adapter à tout type de thème et de mise en page.
  • Vous pouvez contrôler le nombre de boutons en HTML à l’aide de l’élément de code intégré. Cela signifie que vous pouvez placer un nombre différent de boutons sur différentes pages en gardant le même CSS source.
  • Chaque bouton peut être lié à une seule ou à toutes les pages de votre site.

Comment ajouter des boutons de pression CSS 3D dans Weebly ?

Nous allons expliquer ici comment ajouter 5 boutons avec le style 3D ci-dessus. Vous pouvez supprimer ou ajouter le CSS et le code HTML correspondant pour ajouter ou supprimer des boutons et modifier la couleur et les styles.

Étape #1 – Ajout du CSS du bouton

La première étape consiste à décider si vous souhaitez ajouter les boutons uniquement sur quelques pages ou sur plusieurs pages de votre site. Si vous souhaitez ajouter quelques pages, ajoutez le code CSS uniquement à ces pages sous « Pages > Sélectionnez une page > Paramètres de référencement > Code d’en-tête » comme indiqué ci-dessous :

Comment ajouter des boutons de pression CSS 3D dans Weebly ?

Ajouter un code d’en-tête dans la page

Si vous souhaitez ajouter les boutons sur plusieurs pages, il est recommandé d’ajouter les styles CSS dans une feuille de style externe et de créer un lien vers la page. Weebly n’a par défaut qu’une seule feuille de style externe par site. Allez dans la section «Thème > Modifier HTML / CSS > Styles > main.less ». Localisez le fichier et ajoutez le code en bas des autres codes existants. Enregistrez vos modifications et quittez l’éditeur de code.

Comment ajouter des boutons de pression CSS 3D dans Weebly ?

Modification du fichier CSS principal dans Weebly

Lorsque vous utilisez l’éditeur de code, vous devez enregistrer le thème avec un nom personnalisé. Si vous ne souhaitez pas modifier le thème, rendez-vous dans la section « Paramètres > SEO > Code d’en-tête ». Ici, vous pouvez ajouter le code CSS qui sera appliqué à toutes les pages de votre site (similaire à l’édition du fichier main.less).

Comment ajouter des boutons de pression CSS 3D dans Weebly ?

Ajouter un code d’en-tête au niveau du site Weebly

Voici le code CSS des boutons 3D :

<style type="text/CSS"> a.css3dbutton { background: #c1e75c; color: black; text-decoration: none; font: bold 18px Arial; position: relative; display: inline-block; margin-right: 15px; padding: 15px; border-radius: 85px; width: 85px; height: 85px; outline: none; box-shadow: 0 8px 0 #8dab3b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a.css3dbutton span.outer{ text-align: center; width: 100%; display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); } a.css3dbutton span.outer span.top{ display: block; padding-bottom: 4px; } a.css3dbutton span.outer span.bottom{ border-top: 1px solid black; padding-top: 4px; display: block; text-transform: uppercase; line-height: 12px; font-size: 60%; } a.css3dbutton:hover { background: #9cc62b; box-shadow: none; -ms-transform: translateY(8px); -webkit-transform: translate3D(0, 8px, 0); -moz-transform: translateY(8px); transform: translate3D(0, 8px, 0); } a.css3dbutton.blue{ background: #a6e9f7; box-shadow: 0 8px 0 #529dad, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.blue:hover { background: #66cbe1; box-shadow: none; } a.css3dbutton.pink{ background: #fbbaba; box-shadow: 0 8px 0 #d74848, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.pink:hover { background: #ea6161; box-shadow: none; } a.css3dbutton.yellow{ background: #f3fa86; box-shadow: 0 8px 0 #dbcd2f, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.yellow:hover { background: #ecd347; box-shadow: none; } a.css3dbutton.brown{ background: #e0c87e; box-shadow: 0 8px 0 #b3805b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.brown:hover { background: #b3805b; box-shadow: none; } </style>

En savoir plus sur la façon de modifier la source CSS/HTML dans Weebly.

Étape #2 – Ajout de code HTML

Faites glisser et déposez un élément de code d’intégration sur une page où vous souhaitez ajouter les boutons et collez le code ci-dessous à l’intérieur. N’oubliez pas de remplacer # par vos propres liens.

<div> <a href="#" class="css3dbutton"> <span class="outer"> <span class="top">Register </span> <span class="bottom">Register here free</span> </span> </a> <a href="#" class="css3dbutton blue"> <span class="outer"> <span class="top">Login</span> <span class="bottom">Login to access</span> </span> </a> <a href="#" class="css3dbutton pink"> <span class="outer"> <span class="top">Sign Up</span> <span class="bottom">Sign up for free</span> </span> </a> <a href="#" class="css3dbutton yellow"> <span class="outer"> <span class="top">Blog</span> <span class="bottom">Subscribe to blog</span> </span> </a> <a href="#" class="css3dbutton brown"> <span class="outer"> <span class="top">Forum</span> <span class="bottom">Read forum posts</span> </span> </a> </div>

Étape #3 – Personnalisation des boutons

Il existe une infinité de possibilités pour personnaliser les boutons selon vos besoins. Voici un scénario général que vous pourriez rechercher.

Ajouter ou supprimer des boutons

Supposons que vous n’ayez besoin que de 3 boutons au lieu de 5 comme indiqué dans l’exemple. Dans ce cas, vous pouvez supprimer le code des 4e et 5e boutons du CSS et du HTML. Mais nous vous recommandons d’ajouter le nombre maximum de styles en CSS, puis de contrôler le nombre de boutons en HTML. Dans ce scénario, où vous n’avez besoin que de 3 boutons, laissez le code CSS tel quel avec 5 styles différents définis et ajoutez du code HTML uniquement pour 3 boutons.

De cette manière, vous pouvez ajouter 3 boutons sur une page, 5 boutons sur une autre page et ainsi de suite.

Personnalisation des couleurs et de la taille

  • Vous pouvez modifier la couleur du texte et la couleur des attributs du bouton comme l’arrière-plan et l’ombre.
  • Modifiez les attributs de largeur et de hauteur pour changer le bouton rond en taille ovale ou toute autre proportion.

N’oubliez pas que vous pouvez utiliser l’élément spacer pour ajouter suffisamment d’espace au-dessus et au-dessous des boutons. De même, vous pouvez placer le bouton à droite ou à gauche de tout autre élément à l’aide d’espacement.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails