Button BBcode (cliquable et responsive)
-
- Messages : 28
- Enregistré depuis : 2 ans 5 mois
- Prénom : Pierre
- Forum phpBB : https://www.myasthenie.com
- Localisation : Oise
- Intérêt : Photo; Bricolage, Informatique
- Emploi : Retraité du BTP Président d'une association...
Button BBcode (cliquable et responsive)
MessageJe vous propose un bbcode qui permet de créer un bouton personnalisé cliquable et qui se redimensionne en fonction de la largeur de l'affichage (responsive)
Description :
Création d'un bouton cliquable personnalisable
- Le texte personnalisé du bouton est automatiquement centré et mis à la ligne si nécessaire.
- Ce bouton peut être centré, aligné à gauche ou a droite, mis en gras, et la taille des caractères est modifiable par l'ajout des BBCODES de l'éditeur du site (voir exemple à la fin de ce post) .
Utilisation du BBCode :
Code : Tout sélectionner
[button={TEXT}]{URL}[/button]
Code HTML de remplacement :
Code : Tout sélectionner
<span style="
display:inline-block;
padding:0.3em 1.2em;
margin:0 0.3em 0.3em 0;
border-radius:2em;
border:0.1em solid #000000;
box-sizing: border-box;
border-color: #000000;
border-width: 1px;
text-decoration:none;
font-family:'Roboto',sans-serif;
font-weight:bold;
color:#FFFFFF;
background-color:yellow;
text-align:center;
transition: all 0.2s;
">
<a href="{URL}">
<font color="black">{TEXT}</font>
</a>
</span>
Code : Tout sélectionner
Bouton cliquable : [button= saisir le texte ici ] URL [/button]
Exemple :
Voici le code pour afficher le bouton en 85, 100,150 et 200
Code : Tout sélectionner
Taille 85
[size=85][button=mon texte personnalisé]URL[/button][/size]
Taille 100
[size=100][button=mon texte personnalisé]URL[/button][/size]
Taille 150
[size=150][button=mon texte personnalisé]URL[/button][/size]
Taille 200
[size=200][button=mon texte personnalisé]URL[/button][/size]

Pierre
-
- Messages : 202
- Enregistré depuis : 3 ans 7 mois
- Forum phpBB : https://phpbb-forum.fr/forum
- Intérêt : Forum des BBCodes
Le forum et vous

-Gandhi
Inscrivez-vous pour participer au forum ou Connecter-vous à votre compte.