BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS  - Bouton lien et CSS
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Bouton lien et CSS

 Répondre Répondre
Auteur
Message
tyson1007 allez vers le bas
Newbie
Newbie


Depuis le: 14 Avr 2016
Pays: France
Status: Inactif
Points: 24
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer tyson1007 Citer  RépondreRéponse Lien Direct à ce Post Sujet: Bouton lien et CSS
    Envoyé : 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 ?


Merci pour votre aide.
Julien
Tyson
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6508
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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;
}


Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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"
Haut de la page
tyson1007 allez vers le bas
Newbie
Newbie


Depuis le: 14 Avr 2016
Pays: France
Status: Inactif
Points: 24
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer tyson1007 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6508
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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.
Haut de la page
tyson1007 allez vers le bas
Newbie
Newbie


Depuis le: 14 Avr 2016
Pays: France
Status: Inactif
Points: 24
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer tyson1007 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.