Button BBcode (cliquable et responsive)

[pboulanger]

Bonjour à tous,

Je 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>

Ligne d’aide :

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] 

[MariePop's]

Merci pour le partage.