Utiliser les pseudo classes After et Before pour centrer un bouton sur le border-bottom d’un élément div

ScreenHunter_594 Aug. 22 12.03

Les maquettes graphiques du projet sur lequel je travaille actuellement sont faites de telle manière qu'à plusieurs endroits, un bouton est positionné à cheval sur une bordure, généralement la bordure basse qui vient délimiter l'étendue d'un formulaire.

Nous allons voir comment s'y prendre pour restituer cet affichage.

Un alignement fluide et responsive

Notre objectif consiste donc à venir placer un bouton sur la bordure au bas du formulaire. Si on tente d'abstraire le problème, il s'agit de placer un bouton sur la bordure basse de n'importe quel élément englobant.

Notre contrainte principale est le maintient de la fluidité de notre rendu visuel. Nous devrons également veiller à ce que l'affichage soit optimisé aussi bien pour les écrans de bureau que pour les mobiles ou les tablettes.

Le markup

<div class="container"> 
    <div class="content"> 
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper</div> 
    </div> 
    <div class="btn"> 
        <a href="#">Click Me</a> 
        <b></b> 
    </div> 
</div>

Les styles

.container {

position: relative;

}

.content {

padding: 15px 30px 0 30px;

position: relative;

border: 1px solid black;

border-bottom: none;

}

.btn {

position: relative;

text-align: center;

}

.btn::before {

left: 0;

}

.btn::after {

right: 0;

}

.btn::before, .btn::after {

position: absolute;

display: block;

content: "";

width: 1px;

height: 50%;

background-color: black;

top: 0;

}

.btn a {

position: relative;

z-index: 2;

display: inline-block;

b {

position: absolute;

display: block;

width: 100%;

height: 1px;

background-color: black;

top: 50%;

}

Les pseudo classes et l'affichage de la bordure

La bordure sur laquelle nous allons placer notre bouton n'est pas en réalité celle du bas de notre div. Cette bordure nous allons la masquer, pour la reconstruire ensuite à l'aide de la balise <b> que vous avez certainement remarquée dans notre markup. Cette balise qui est ouverte, puis immédiatement refermée, n'en est pas moins utile. Cet élément va courir sur toute la largeur de notre div et passer derrière notre bouton (grâce à la propriété z-index). En lui donnant une hauteur de 1px et une couleur de fond (background-color) noire, elle va imiter notre bordure basse.

De plus, notre élément <b> est positionné de façon absolue, et il suit immédiatement notre élément <div> dans le markup. Sa propriété  "top: 50%" permet de le placer à mi-hauteur, mais elle entraine une interruption des bordures latérales en bas de notre <div>, la jonction avec la bordure basse ne se faisant pas.

C'est là qu'interviennent les pseudo classes :After et :Before. En leur donnant une hauteur de 50%, et une largeur de 1 px, on parvient à combler le vide laissé par le positionnement de notre <b>.

Mais comme un exemple est de loin plus parlant qu'un long discours, voyez le résultat obtenu :

jsFiddle

J'aurais préféré un button...

Et vous avez raison, depuis le début de cet article, je vous parle de notre bouton alors que j'utilise en fait un lien <a>... Un peu d'habillage vous permettra aisément de transformer votre lien en bouton.

Ajoutez ces lignes aux styles de .btn a, dans votre CSS:

color: black;
background-color: #C1CFD4;
border-color: grey;
text-decoration: none;
text-align: center;
vertical-align: middle;
border: 1px solid transparent;
padding: 12px 20px;
border-radius: 24px;
text-transform: uppercase;

Avec l'application de ces styles, votre lien devrait ressembler à un bouton assez simple, aux bordures arrondies.

Enregistrer

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.