Lien dégradé au survol
Lawrage vous propose de réaliser la création suivante :
Sommaire
Yo !
Voici un petit tutoriel pour réaliser un joli effet de dégradé au survol d'un lien à l'aide de "box-shadow". Tout est sur le code, je te laisse jouer avec !
Pour ceux moins à l'aise avec le codage, le code HTML c'est pour structurer ta page donc lui dire : ici, je veux mettre un bouton avec un lien. Et le code CSS, c'est pour habiller ton HTML avec de jolis effets. Pour ça, dans le code HTML on met une class (class="degrade") qui renvoi au CSS. Là, on va coder une partie .degrade dans laquelle on va modifier l'apparence du lien normal et une partie .degrade:hover dans laquelle on va modifier l'apparence du lien au survol de la souris.
Ton code HTML :
<button class="degrade" onclick="window.location.href = 'ADRESSE DE TON LIEN';">Ton lien</button>
Ton code CSS :
.degrade { /*Apparence de ton lien sans le survol de la souris*/
position: absolute;
width: 150px; /*Taille de ton lien en largeur*/
height: 40px; /*Taille de ton lien en longueur*/
color: #a0a0a0; /*couleur du texte*/
padding: 15px; /*Marges entre ton texte et la bordure du fond gris du lien*/
font-size: 12px; /*Taille du texte*/
font-weight: bold; /*"épaisseur" du texte*/
text-transform: uppercase; /*Ton texte sera écrit en majuscules*/
border: 0; /*Pour ne pas avoir de bordure moche*/
border-radius: 2px;
background-color: #eeeeee; /*C'est la couleur de fond de ton lien sans le passage de la souris. Ici c'est gris*/
transition: box-shadow 2s; /*Temps que dure l'apparition de la couleur en dégradé*/
transition: 0.8s; /*Temps que dure la transition*/
}
.degrade:hover { /*Apparence de ton lien au survol de la souris*/
background-color: #fe6b4d; /*Couleur côté droit du dégradé*/
color : white; /*Couleur de ton texte, si tu veux qu'elle change pour qu'il se voit mieux sur le dégradé*/
box-shadow: 150px 0px 100px -100px #ffc42d inset; /*Couleur côté gauche du dégradé (les mesure écrites avant servent à retoucher la taille du dégradé. Joue avec si tu changes la taille de ton lien pour l'adapter à tes besoins)*/
letter-spacing: 2px; /*Espacement entre les lettres*/
}
Rendus
Commentaires
Ce tutoriel n'a pas reçu de réponses pour le moment. Soyez le premier à le commenter !
Répondre
Vous devez être inscrit et connecté pour pouvoir poster un commentaire.