Vous êtes ici : Accueil > Démonstrations > CSS > Textes/boutons

Décoration liens hypertexte

CSS Grid et la propriété gap :

Code :



<div class=lien-grid-gap>
<a href="">Lien hypertexte</a>
</div>

<div class=lien-grid-gap1>
<a href="">Lien hypertexte</a>
</div>

<div class=lien-grid-gap2>
<a href="">Lien hypertexte</a>
</div>

<div class=lien-grid-gap3>
<a href="">Lien hypertexte</a>
</div>

<div class=lien-grid-gap4>
<a href="">Lien hypertexte</a>
</div>

<div class=lien-grid-gap5>
<a href="">Lien hypertexte</a>
</div>







[class^="lien"]{
	
transition: .4s;
display: grid;
overflow:hidden;
	
	}
	
	
	
.lien-grid-gap{
	
grid-column-gap: 100%; 
grid-template-columns:  1fr;
grid-template-rows: 2rem 1rem;
		
	}
		
.lien-grid-gap a{
	
grid-column: span 2
	
}
		
.lien-grid-gap::after{
	
content: '';
align-self:end;
height:50%;
background-color: #7d68e8
	
	}	
		
		
.lien-grid-gap:hover{ 
	
grid-column-gap: 0%
	
}	
	
	
.lien-grid-gap1{
	
grid-row-gap: 100%; 
grid-template-rows: 2rem 1rem
	
}
		
		
.lien-grid-gap1:hover{
	
grid-row-gap: 0
	
}	
		
.lien-grid-gap1::after{
	
content: '';
align-self: end;
height: 50%;
background-color: #7d68e8
		
		}	
	
	
.lien-grid-gap2{

grid-column-end: -1;
column-gap: 0; 
grid-template-columns: 1fr 1fr;
grid-template-rows: 2rem 1rem
	
	}		
		
		
.lien-grid-gap2	a{
	
grid-column: span 2
	
}	
		
.lien-grid-gap2:hover{
	
column-gap: 100%
	
}	
	
.lien-grid-gap2::before{
	
height: 50%;
align-self: end;
background-color: #7d68e8;
content: '';
grid-row: 2;	
	}
		
.lien-grid-gap2::after{

content: '';
align-self: end;
height: 50%;
background-color: #7d68e8
		
}		
	
	
.lien-grid-gap3{
	
grid-column-gap: 100%; 
grid-row-gap: 100%;
grid-template-columns:  1fr 1fr;
grid-template-rows:  2rem 1rem;
		
	}
		
.lien-grid-gap3 a{
	
grid-column: span 2
	
	}
		

		
.lien-grid-gap3::before{
	
content: '';
align-self:end;
grid-row: 2;
grid-column: 1;
z-index: 1;
height: 50%;
background-color: #7d68e8
	
	}
		
		
.lien-grid-gap3::after{
	
content: '';
align-self:end;
justify-items: center;
grid-row: 2;
grid-column: 2;
height: 50%;
background-color: #7d68e8
	
	}	
		
		
.lien-grid-gap3:hover::after{
	
z-index:1
	
	}
	
.lien-grid-gap3:hover::before{
	
z-index:-1
	
	}
	
.lien-grid-gap3:hover{
	
column-gap:0;
grid-row-gap: 0
	
	}	
	

.lien-grid-gap4 {
	
grid-column-gap: 100%; 
grid-template-columns: 1fr;
grid-template-rows: 1rem 2rem 1rem;
	
}

.lien-grid-gap4 a{
	
grid-column: span 2
	
}
	
.lien-grid-gap4:hover{ 

grid-column-gap: 0
	
}

.lien-grid-gap4::before {
	
height:50%;
content:'';
background-color: #7d68e8

}

.lien-grid-gap4::after {
content:'';
height:50%;
align-self:end;
background-color: #7d68e8

}		
		
		
.lien-grid-gap5 {
	
grid-column-gap: 100%; 
grid-template-rows: 2rem 1rem;
	
}

.lien-grid-gap5 a{
	
grid-column: span 2
		
}
	
.lien-grid-gap5:hover{ 
	
grid-column-gap: 0
		
}

.lien-grid-gap5::before {
	
height: 50%;
align-self: end;
content: '';
grid-row: 2;
background-color: #7d68e8

}

.lien-grid-gap5::after {
	
content: '';
height: 50%;
align-self: end;
background-color: #7d68e8

}		
	
    

CSS flexbox et la propriété gap

Code :



<div class=flex-gap1>
<a href="">Lien hypertexte</a>
</div>

<div class=flex-gap2>
<a href="">Lien hypertexte</a>
</div>







.flex-gap1{
transition:.4s;
overflow: hidden;
display: flex;
flex-flow: row wrap;
row-gap:20%;
}
		

.flex-gap1:hover{row-gap:0%}	

		
.flex-gap1::after{
content: '';
flex-basis:100%;
height:.5rem;
background-color: #7d68e8
		
		}

	
.flex-gap2{
	transition:.4s;
overflow: hidden;
display: flex;
flex-flow: row wrap;
row-gap:0%;
}
		

.flex-gap2:hover{row-gap:20%}	

		
.flex-gap2::after{
content: '';
flex-basis:100%;
height:.5rem;
background-color: #7d68e8
		
		}
	
	

    

CSS flexbox + flex-basis :

Code :



<div class=flex-basis1>
<a href="">Lien hypertexte</a>
</div>

<div class=flex-basis2>
<a href="">Lien hypertexte</a>
</div>





.flex-basis1{
height: 46px;
display: flex;
flex-flow: row wrap;
}
		
.flex-basis1 a{
align-self: flex-start;

	
	}
		
	
	
.flex-basis1::after{
transition: .4s;
content: '';
flex-basis:0%;
height:.5rem;
background-color: #7d68e8
		
		}	
	
.flex-basis1:hover:after{
	
	flex-basis:100%;
	
	}	

.flex-basis2{
height: 46px;
display: flex;
flex-flow: row wrap;
}
		
.flex-basis2 a{
align-self: flex-start;

	
	}
		
	
	
.flex-basis2::after{
transition: .4s;
content: '';
flex-basis:100%;
height:.5rem;
background-color: #7d68e8
		
		}	
	
.flex-basis2:hover:after{
	
	flex-basis:0%;
	
	}				
	
    

CSS Grid et la propriété width :

Code :



<div class=lien-grid-width>
<a href="">Lien hypertexte</a>
</div>

<div class=lien-grid-width1>
<a href="">Lien hypertexte</a>
</div>

<div class=lien-grid-width2>
<a href="">Lien hypertexte</a>
</div>

<div class=lien-grid-width3>
<a href="">Lien hypertexte</a>
</div>

<div class=lien-grid-width4>
<a href="">Lien hypertexte</a>
</div>

<div class=lien-grid-width5>
<a href="">Lien hypertexte</a>
</div>

<div class=lien-grid-width6>
<a href="">Lien hypertexte</a>
</div>





[class^="lien"]{
	
display: grid;
}
	
.lien-grid-width,
.lien-grid-width1,
.lien-grid-width2,
.lien-grid-width3{grid-template-rows: 2rem 1rem}
	

	
.lien-grid-width::after{
transition:all .4s;
content: '';
align-self:end;
justify-self:center;
height: 0;
width: 0;
background-color: #7d68e8
	
	}
	
	
.lien-grid-width1::after{
transition:all .4s;
content: '';
align-self:end;
height:0;
width:100%;
background-color: #7d68e8}
	
	

.lien-grid-width:hover::after,
.lien-grid-width1:hover::after{
	
	height:50%;
	width:100%
	
	}
		
	

	
.lien-grid-width2::after{
transition:all .4s;
content: '';
height:50%;
width:0;
justify-self:center;
align-self:end;
background-color: #7d68e8}


.lien-grid-width2:hover::after{
	
	width:100%
	
	}	
	


.lien-grid-width3::after{
	
transition:all .4s;
content: '';
height: 50%;
justify-self:end;
align-self:end;
width: 0;
background-color: #7d68e8
	
	}

	
.lien-grid-width3:hover::after{
	
justify-self: start;
width: 100%;
	
	}
	
	
	
.lien-grid-width4{
grid-template-rows:1rem 2rem 1rem}
	
.lien-grid-width4::before{
transition: all .4s;
content: '';
height: 50%;
width: 10%;
background-color: #7d68e8
	}
	
.lien-grid-width4::after{
transition: all .4s;
content: '';
align-self:end;
justify-self:end;
height: 50%;
width: 10%;
background-color: #7d68e8
	}

.lien-grid-width4:hover::before,
.lien-grid-width4:hover::after{

width:100%

}
	

.lien-grid-width5{
	
display:inline-grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 2rem 1rem
	
	}

.lien-grid-width5 a{

grid-column:span 2
	
}
	
.lien-grid-width5::before{
	
grid-row: 2;
align-self: end;
transition: all .4s;
content: '';
height: 50%;
width: 0;
background-color: #7d68e8
	
	}
	
.lien-grid-width5::after{

align-self: end;
justify-self: end;
transition: all .4s;
content: '';
height: 50%;
width: 0;
background-color: #7d68e8

}
	
.lien-grid-width5:hover::before,
.lien-grid-width5:hover::after{

width:100%

}
	
	
.lien-grid-width6{

grid-template-columns:  1fr;
grid-template-rows:  2rem 1rem;
		
	}
		
.lien-grid-width6 a{

grid-column: span 2

}
		
.lien-grid-width6:hover::after{

z-index: 1

}
		
.lien-grid-width6::before{

content: '';
align-self: end;
grid-row: 2;
grid-column: 1;
height: 50%;
background-color: #7d68e8

}
		
		
.lien-grid-width6::after{
width: 0;
transition:.4s;
content: '';
align-self:end;
grid-row:2;
grid-column:1;
height:50%;
background-color:#3cddc4}	
		
		
.lien-grid-width6:hover::after{

width:100%; 

}	
	
    

Pseudo-éléments et positionnement :

Code :



<div class=cadre-demo1>
<a class=position href="">Lien hypertexte</a>
</div>

<div class=cadre-demo1>
<a class=position1 href="">Lien hypertexte</a>
</div>

<div class=cadre-demo1>
<a class=position2 href="">Lien hypertexte</a>
</div>

<div class=cadre-demo1>
<a class=position3 href="">Lien hypertexte</a>
</div>






.cadre-demo1 a{

height:3rem;
position: relative;

	
	} 
	
.position3::before,
.position3::after, 
.position1::before, 
.position1::after,
.position2::before, 
.position2::after,  
.position::before, 
.position::after {
	
content: '';
position: absolute;
transition: width .4s ease-in
	
	}
    

    
.position::before{
	
	bottom: 0;
	left: 0;
	width: 100%;
	height: .5rem;
	background-color: #7d68e8
	
	}
	
.position::after{
	
left: 0;
bottom: 0;
width: 0;
height: .5rem;
background-color:#3cddc4
	
	}
	
.position:hover::after{
	
	width: 100%
	
	}
    

.position1::before{
	
	bottom: 0;
	left: 0;
	width: 0;

	
	}
	
.position1::after{
	
	left: 0;
	bottom: 0;
	width: 0;
	height: calc(100vh / 98);
	background-color: #7d68e8
	
	}
	
	
.position1:hover::after{
	
	width: 100%
	
	} 
    

.position2::before{
	
bottom: 0;
left: 50%;
width: 0;
height: calc(100vh / 98);
background-color: #7d68e8
	
	}
	
.position2::after{
right: 50%;
bottom: 0;
width: 0;
height: calc(100vh / 98);
background-color: #7d68e8
	
	}
	
.position2:hover::after{
	
	width:50%
	
	}
	
.position2:hover::before{
	
	width:50%
	
	}  
    
	
.position3::before{
	
bottom:0;
left:0;
width:0;
height:calc(100vh / 98);
background-color: #7d68e8
	
	}
	
.position3::after{
right:0;
bottom:0;
width:0;
height:calc(100vh / 98);
background-color: #7d68e8
	
	}
	
.position3:hover::after{
	
	width:50%
	
	}
	
.position3:hover::before{
	
	width:50%
	
	}  	
		

Vous rencontrez un problème avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.

Votre navigateur est trop ancien pour afficher le contenu de ce site.