Votre navigateur ne supporte pas cette démonstration
<div class=navigation>
<a href="#!">rubrique</a>
<a href="#!">rubrique</a>
<a href="#!">rubrique</a>
<a href="#!">rubrique</a>
</div>
*{
box-sizing: border-box
}
@property --clip-path {
syntax: "<number>";
initial-value: 0;
inherits: false;
}
.navigation {
display: flex;
margin: 5rem auto;
justify-content: center;
flex-wrap: wrap;
gap:10px;
font-size: clamp(1rem, 2vmax, 1.5rem);
white-space: nowrap;
}
.navigation>*{
width: 15ch;
height: 3rem;
}
.navigation a {
--clip-path: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.999;
background: linear-gradient(#000, #000),
radial-gradient(circle at var(--x) var(--y),
var(--couleur-clip) calc(var(--clip-path)*100% - 1px),
transparent calc(var(--clip-path)*100%)),
linear-gradient(var(--couleur-clip), var(--couleur-clip));
-webkit-background-clip: border-box, border-box, text;
background-clip: border-box, border-box, text;
background-blend-mode: difference;
-webkit-text-fill-color: transparent;
color: transparent;
text-transform: uppercase;
text-decoration: none;
transition:--clip-path .3s ease-in;
}
.navigation a:hover,
.navigation a:focus {
--clip-path: 1 ;
}
.navigation a:first-child{--couleur-clip: #ea4335; --x: 10%; --y: 0%}
.navigation a:nth-child(2){--couleur-clip: #4285f4; --x: 50%; --y: 0%}
.navigation a:nth-child(3){--couleur-clip: #34a853; --x: 50%; --y: 50%}
.navigation a:last-child{--couleur-clip: #fbbc05; --x: 90%; --y: 0%}