bouton responsiv.

Avant flex.

Pour créer des boutons qui puissent s'adapter en fonction de la mise en page et sans avoir à les faire dans des 'div' séparés avec une 'width' prédéfinie, nous utilisons la balise 'p' qui suporte les même attributs de styles. A savoir les éléments 'border' et la pseudo classe ':hover'. L'élément 'p' est de type bloc ce qui fait que plusieurs de ces même éléments seront distribués les uns en dessous des autres par défaut. Pour pouvoir les mettres les uns à coté des autres, il suffit de changer la valeur 'display' par défaut par 'display: inline-block'. Et à l'intérieur des balises 'p', nous inserons la balise 'a' pour nos liens. Ci-dessous la structure HTML avec le code CSS qui nous donne accès aux propriétés des éléments:

.conteneur {
border: 1px solid #0C1308;
width: 50%;
margin-left: 30%;
}

.bouton {
display:inline-block; 
position:relative; 
background: #589EFD; 
padding:.45em 1.2em; 
margin-left: 1em;
border: 2px solid #D16DBA; 
}

.bouton:hover {
background: #D16DBA;
border: 2px solid #589EFD;
}

.bouton a {
color: #0C1308;
text-decoration: none;
}

.bouton a:hover {
color: #C9DFBD;
text-decoration: underline;
}

<div class="conteneur">
	<p class="bouton"><a href="#">Ici le texte de mon lien !</a></p>
	<p class="bouton"><a href="#">Un autre...</a></p>
</div>	
								

Ainsi, le conteneur s'adapte au texte. Un petit exemple:

La contrainte restante étant la gestion des marges autour des éléments... Mais flex y apporte une solution pratique !


Avec flex.

Au lieu de modifier la propriété 'display' de 'p', nous allons modifier la balise parent, 'div' pour afficher nos blocs les uns à coté des autres de cette manière:

		
.containBouton {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 50%;
border: 1px solid #0C1308;
}

.bouton2 {
background: #589EFD; 
padding:.45em 1.2em; 
border: 2px solid #D16DBA;
}

.bouton2:hover {
background: #D16DBA;
border: 2px solid #589EFD;
}

.bouton2 a {
color: #0C1308;
text-decoration: none;
}

.bouton2 a:hover {
color: #C9DFBD;
text-decoration: underline;
}	

<div class="containBouton">
	<p class="bouton2"><a href="#">Ici le texte de mon lien !</a></p>
	<p class="bouton2"><a href="#">Un autre...</a></p>
</div>						 					
								

La répartition des blocs dans le 'div' parent se fait par la propriéte 'justify-content: space-around'. Donc plus à se soucier des marges !


Bouton poussoir.

Je vais décortiquer ici un code écrit par Mathieu Chartier issus d'un de ses arcticles. Ce n'est tout à fait le code original car j'ai omis ce qui concernait Font Awesome. Il s'agissait juste d'une icone mise dans le bloc de gauche. Donc, voici le rendu (presque original ;) du code qu'il proposait. Sympa comme effet !

Coté HTML, voci ce que ça donne: (si possible remplacer 'strong' serait pas mal surtout pour afficher un texte avec une taille plus petite... question de sémantique.)

	
<div>
	<p class="bouton-poussoir">
	<a>
	<span><i class="fa fa-sign-in"></i></span> /* i = ref pour icone Font awesome */
	Super bouton<strong>Information complémentaire</strong>
	</a>
	</p>
</div>							 	
							 	

Comme il joue avec les effets de bordures et les ombrages, voici une vue éclatée afin de mieux comprendre. Ici, nous voyons distinctement deux changements d'états donnés par ':hover' (au survol) et 'active' (en cliquant).

Pour l'essentiel, dans un élément de type bloc 'p' qui possède ses propres styles, englobe des éléments de types 'inline' dont le 'span' qui sera modifié en type 'block' et positionné de manière absolue afin de le placer juste devant son parent. Ensuite, l'état 'active' fait descendre le bloc parent 'p' mais non le span car il s'est vu repositonné dans l'état 'active' de la même valeur que son parent mais par une valeur négatif le faisant apparaitre immobile. Ensuite, c'est avec les bordures et les ombres que ce fait le reste. Voci un extrait du code CSS:

	
.bouton-poussoir a {
	display:inline-block; /* permet d'aligner les éléments rendus 'block' */
	background:#007db7; 
	position:relative; 
	
	padding:.45em 1.2em; 

	border-left:1px solid #2ab7ec; 
	
	margin-left: 4em; /* marge gauche du block parent */
	
	box-shadow:
	inset 0 1px 0 #008bcc, /* ombre haut sans blur. */
	0 4px 0 0 #156785, /* ombre bas sans blur */
	0px 4px 4px #666; /* ombre gauche droite et bas avec blur. */
}



.bouton-poussoir a:active {top:3px} 
/* le bloc parent descende 3px alors que le span lui reçoit une valeur de -3px */

.bouton-poussoir a:active span {
	top: -3px; 
/* et voilà le tour est joué (presque...)! un bel effet !*/	
	box-shadow:
	inset 0 1px 0 #333, 
	0 4px 0 0 #333, 
	1px 1px 0 0 #044a64, 
	2px 2px 0 0 #044a64, 
	2px 4px 0 0 #044a64, 
	4px 3px 2px #0b698b, 
	0 5px 3px #666
}


.bouton-poussoir a span {

	background:#222;
	
	font-size:1.2em; 
	width:2.1em; 
	
	left:-6em; /* positionne le 'span' devant son parent 'p' */

	position:absolute; 
	display:block; 
	
	height:100%; 
	top:0; 

	color:#eee; 
	
	border-right:1px solid #07526e; 

	box-shadow:
	inset 0 1px 0 #333, /* ombre haut sans blur. */
	0 4px 0 0 #333, /* ombre bas sans blur */
	0 4px 4px #666; /* ombre gauche droite et bas avec blur. */
}

.bouton-poussoir a:active span {

	top: -3px; /* top:-3px;  rectifie la valeur global de 3 pour le laisser immobile */ 
	
	box-shadow:
	inset 0 1px 0 #333, 
	0 4px 0 0 #333, 
	1px 1px 0 0 #044a64, 
	2px 2px 0 0 #044a64, 
	2px 4px 0 0 #044a64, 
	4px 3px 2px #0b698b, 
	0 5px 3px #666
}
	
.bouton-poussoir a:hover span {background:#444}					 	
							 	

Documents et sources:

L'article original du boutton poussoir est ici !

Article de Mathieu Chartier sur blog.internet-formation.fr

Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 10/10/2020

Tests effectués sous Firefox 61.0.1 et Midori 0.5.11