Imprimer la Page | Fermez la fenêtre

Bouton lien et CSS

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Scripts pour votre site
Description du Forum: Exemple de scripts utilisables dans les blocs de codes
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=22015
Date: 28 Mar 2024 à 09:34
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com


Sujet: Bouton lien et CSS
Posté par: tyson1007
Sujet: Bouton lien et CSS
Posté le: 06 Mai 2016 à 13:24
Bonjour la Communauté.
J'ai besoin de vos lumières.

1) Je créé un bandeau menu avec 6 boutons lien. Je souhaite donner un style CSS commun à ces boutons, leur ai donc attribué une Classe perso 'bouton3'.
Cependant, lorsque je tape ma mise en forme CSS, elle s'applique au bouton en lui même mais je n'arrive pas à la faire s'appliquer au texte du bouton.

Exemple :
.bouton3:hover{
color: firebrick;
font-weight: bold;
text-shadow: -1px -1px 1px Silver;
background-color: yellow;
}
tout fonctionne sauf la couleur du texte qui reste bleu.

2) J'ai attribué au 1er bouton un style lorsqu’il est à l'état 'Lien actif'. Cela fonctionne sauf que je souhaiterais, toujours sur le même principe, attribuer ce style automatiquement aux autres boutons via CSS et l'attribut Classes perso mais je ne trouve pas comment faire malgré mes recherches dans mon livre de CSS et internet.
C'est possible ou je dois paramétrer tous les boutons un par un ?

Le lien de mon site : http://www.conciergerieduhautdoubs.fr" rel="nofollow - http://www.conciergerieduhautdoubs.fr

Merci pour votre aide.
Julien


-------------
Tyson



Réponses:
Posté par: Hobby001
Posté le: 06 Mai 2016 à 15:07
Il y a deux niveaux dans un bouton lien, le cadre principal et une zone de texte.

Si vous mettez une classe BtnLnk au cadre et une classe BtnLnkTxt au texte, le code suivant fonctionne.

.BtnLnkTxt:hover{
font-size:60px;
color:red;
}

.BtnLnk:active{
background-color:red;
}




-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: nico38
Posté le: 06 Mai 2016 à 16:30
color se change sur la balise <a>

.bouton3 a:hover{
color: firebrick;
}
Vous pouvez faire ça sur OE sans passer par un bloc de code, c'est l'intérêt d'utiliser OE plutôt que Notepad Thumbs Up


-------------
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"


Posté par: tyson1007
Posté le: 06 Mai 2016 à 17:33
Merci.
Message posté par nico38 nico38 a écrit:

Vous pouvez faire ça sur OE sans passer par un bloc de code, c'est l'intérêt d'utiliser OE plutôt que Notepad
OK mais pour plusieurs boutons il faut bien passer un un bloc code non ?
Message posté par Hobby001 Hobby001 a écrit:

Il y a deux niveaux dans un bouton lien, le cadre principal et une zone de texte.
Super ! Merci pour l'info. Je comprend mieux.

Cependant le résultat n'est toujours pas là Angry
Je pense que la ligne de code
.BtnLnk:active{}
ne correspond pas à mes attentes.

Vous pouvez voir sur mon site le bouton 'Accueil' paramétré à la mains avec le rendu désiré et les autres boutons avec le bloc code CSS ci-dessous mais lorsque je suis sur la page concerné, ils ne réagissent pas comme le bouton 'Accueil'.
.bouton3{
border: none;
width: 12%;
height: auto;
font-size: 18px;
text-align: center;
}

.bouton-t3{
color: Black;
font-family: Georgia, 'Times New Roman', Times, serif;
}

.bouton-t3:hover{
color: Firebrick;
text-shadow: -1px -1px 1px Silver;
}

.bouton-t3:active{
color: Firebrick;
font-style: italic;
}


-------------
Tyson


Posté par: Hobby001
Posté le: 06 Mai 2016 à 17:53
Vous sélectionnez d'un coup tous les boutons.  Click sur le premier puis en maintenant enfoncée la touche Enter du clavier un click sur chacun des autres boutons.

Dans le menu, onglet ''zone de style", à droite vous sélectionnez que vous travaillez sur le cadre ou sur la zone de texte, vous sélectionnez l'état, normal, survol de souris ou click, vous modifiez les parametres selon votre besoin.

De cette façon tout est fait pour tous les boutons d'un seul coup.  Pas besoin de code.


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: tyson1007
Posté le: 06 Mai 2016 à 19:09
Merci Hobby001 Handshake

Pourquoi faire simple quand on peut faire compliqué Smile.

C'est bouclé pour moi. Merci pour votre aide.


-------------
Tyson



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net