Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

Effet enfoncement de bouton

302 appréciations
Hors-ligne
Bonjour et bon dimanche à vous tous.

Pour mon blog Pixelles j'aimerai bien savoir SVP comment faire un effet enfoncement de bouton pour l'accueil et contact  dans ma barre de navigation qui est dans ma bannière ? 

1422 appréciations
Hors-ligne
Pixelles
le  plus simple serait que tu fasses une création avec mis dessus Accueil et insérer cette création à la place du texte.

302 appréciations
Hors-ligne
Merci Christine simplement j'aimerai bien que l'effet face vraiment enfoncement de bouton j'espère que je suis assez claire dans ma définition que quand on clic dessus on est vraiment l'impression que le bouton s'enfonce  est ce  vraiment possible à réaliser ?

Dernière modification le dimanche 05 Février 2017 à 11:40:11

1216 appréciations
Hors-ligne


Pixelles,

Il faut faire comme te le dit Soleilvie (Christine).

Pour l'image, il faut mettre un bouton qui ait l'effet que tu souhaites.

En cherchant bien, tu devrais en trouver sur les sites de gifs animés.

Bon dimanche.





1422 appréciations
Hors-ligne
Pixelles je comprend ce que tu veux;
Tiens ! Cela va me permettre de faire un petit exercice en cherchant comment faire cet effet.
Je te tiens au courant !

302 appréciations
Hors-ligne
Regardez le lien ,  l'animation N7 c'est cet effet que j'aimerai obtenir je sais c'est du flash mais est il possible d'avoir quelques choses de similaire
Animation N7 Flash

302 appréciations
Hors-ligne
Vie j'ai trouvé ça 
Barre de menu

Menu apparence bouton je continue

1422 appréciations
Hors-ligne
Mille excuses mais je ne me suis pas encore penchée dessus !

302 appréciations
Hors-ligne
C'est pas urgent 

317 appréciations
Hors-ligne

L'effet de bouton qui s'enfonce s'obtient grâce à un "effet de la bordure". En dehors du survol de la souris, la bordure possède la propriété outset. Au survol de la souris, il suffit d'inverser cette bordure, pour obtenir l'effet visuel du bouton qui s'enfonce en passant à la propriété inset. 
Pour plus de détails et obtenir un exemple visuel, tu peux te rendre sur le site openweb.
Après tu peux aussi jouer sur les ombrages, pour un effet plus...doux? en regardant sur cette page.

Dans les deux cas il faut juste jouer sur le css ^^
Bonne journée!

302 appréciations
Hors-ligne
Bonsoir Kyû et merci  pour tes explications cela paraît tellement simple quand tu l'écris simplement je ne suis pas sûr d'avoir tout compris mais je vais tester merci

317 appréciations
Hors-ligne
Bonsoir,
Je te laisse regarder et si ça ne va pas, je jetterai un plus gros coup d'œil si tu veux 

302 appréciations
Hors-ligne
En faite je viens de regarder et c'est pas l'effet que je souhaite si tu regardes ici 
Exercice N7

317 appréciations
Hors-ligne
pixelles
Autant pour moi j'avais mal lu 
Je viens de remettre mon blog test en libre accès. J'ai fais les modifications sur la barre de navigation. Est-ce que ça correspond plus à ce que tu cherchais?

302 appréciations
Hors-ligne
Bonjour Kyû , oui c'est ça que je voudrais , simplement ce n'est pas au passage de la souris que le bouton doit s’enfoncer mais bien quand on clique dessus,et  si tu regardes mon blog Pixelles 
PIXELLES

ma barre de navigation, tu verras que  les lien ne sont pas vraiment à leurs place normal alors dit-moi comment je dois procéder STP.

Dernière modification le mercredi 08 Février 2017 à 17:28:27

317 appréciations
Hors-ligne
 @pixelles@
OK, pas de soucis j'ai fais la modification. Je ne pense pas que la place des liens pose problème car où qu'ils se trouvent la balise à modifier aura le même nom. Alors voilà comment ça se passe
pour "mettre en forme" le bouton à proprement parler, il faut rajouter ces quelques lignes au bon endroit de ton css :
nav a{
border-radius: 100px;
box-shadow: 3px 3px 3px 0px #213C03, 0px 0px 4px 4px #213C03 inset ;/*le premier met un ombrage vers l'intérieur et après la virgule c'est l'ombrage pour l'extérieur*/
}

ensuite on passe à l'effet "d'enfoncement du bouton", mais seulement au clic de la souris, autrement dit seulement au moment de l'action du clic : 
nav a:active{
  border-radius: 100px;
    box-shadow: 0px 0px 4px 4px #213C03 inset;
}

Libre à toi te changer les couleurs, mais il faut bien que le "padding" soit le même dans les deux cas, car sinon tu risques d'avoir un effet de "décalage" des liens. 
Voilà! Très bonne journée!
 

Dernière modification le jeudi 09 Février 2017 à 07:23:24

1052 appréciations
Hors-ligne
Bel exemple @KYU@


Voici une autre manière


nav a {
    color: #720d28 !important;
    font-family: Pointedly Mad !important;
    font-size: 25px;
    line-height: 40px;
    border: 5px outset ;
    border-radius: 50%;
    margin-left: -5px;

}
nav a:hover {
    color: DeepPink !important;
    border: 5px inset pink;
    font-size: 25px;

}



302 appréciations
Hors-ligne
Bonsoir Kyû et c' est vraiment géniaaaaaaaaaaaaaaaaaaaaaal  tu as trouvé se que je voulais  avoir ,  beaucoup Simon vous êtes sur la bonne voie.

Simplement maintenant il faut que je sache quel code prendre? car vous m'en avez mis tout les deux ,  est ce qu'il faut que je rajoute aussi  des images oui non.

1052 appréciations
Hors-ligne
re
Le code de Kyu est très bien mais il faut l'ajuster en taille et en couleur  ( à toi de voir ).

J'ai essayé le mien et le rendu est correct.


Remplaces les codes concernés par ça.

nav a {
    color: #720d28 !important;
    font-family: Pointedly Mad !important;
    font-size: 25px;
    line-height: 40px;
    border: 5px outset ;
    border-radius: 50%;
    margin-left: -5px;

}
nav a:hover {
    color: DeepPink !important;
    border: 5px inset pink;
    font-size: 25px;

}



302 appréciations
Hors-ligne
Bonsoir Simon, comment je peux faire pour agrandir le ovale pour qu'il se rapproche le + possible du mien?

1052 appréciations
Hors-ligne
Ce n'est pas facile de bien tomber en face mais voici une solution.


/*ajuster la barre */
nav ul {
    float: left;  /* faire flotter nav sur la droite */
    margin: -485px 30px 0 25px;  /*position*/
 
}
nav li {
 
    display: inline-block;  
    margin: 135px 1020px 0 0;     
 
}
nav a {
    color: #720d28 !important;
    font-family: Pointedly Mad !important;
    font-size: 28px;
    line-height: 40px;
    border: 5px outset ;
    border-radius: 50%;
    margin-left: -13px;
}
nav a:hover {
    color: DeepPink !important;
box-shadow: 0px 0px 4px 4px #574D4B inset;
    border: 5px inset pink;
color: DeepPink!important; /* couleur au survol souris*/
}
/***fin**/


317 appréciations
Hors-ligne
De mon côté pas besoin d'image, il suffit juste de rajouter ces lignes de codes dans ton css actuel au bon endroit 
Après il suffit d'adapter les couleur pour que ça corresponde au mieux aux tiennes. 
La taille ne devrait pas poser de problème vu que tu as déjà entrer les mesure pour obtenir ta barre de navigation actuelle  :)

Très bonne journée à tous les deux!

302 appréciations
Hors-ligne
j'y regarderai se soir là j'ai fais n'importe quoi merci et bonne journée à vous deux 

302 appréciations
Hors-ligne
Bonsoir Kyû et  voilà j'aime beaucoup l’aspect du bouton qui est en place  simplement quand je diminue le font-size cela diminue aussi le ovale  voir capture est possible d'avoir un plus gros bouton et une police + petite?

PIXELLES



Dernière modification le vendredi 10 Février 2017 à 17:53:25

317 appréciations
Hors-ligne
Bonjour, bonjour,

@pixelles@
Oui bien sûr c'est possible, il suffit de jouer sur le padding. En en rajoutant un, tu pourras avoir le bouton à la même taille et le texte plus petit.
Par contre il faudra bien mettre le même dans nav a et nav a:active, sinon ça donnera un effet bizarre au moment du clic :)
Bonne journée! 

Dernière modification le samedi 11 Février 2017 à 07:13:12

1052 appréciations
Hors-ligne
re

Je redonne un code avec la fonction border.
il faut remplacer  les mêmes codes par ceux-ci.

nav a {
    border-radius: 100px;
    color: #720d28 !important;
    font-family: Pointedly Mad !important;
    font-size: 18px;
    line-height: 40px;
    padding: 8px;
    border: 4px outset pink;
    box-shadow: 1px 1px 10px black;

}
nav a:hover {
    color: DeepPink !important;
    border: 4px inset pink;
}


1052 appréciations
Hors-ligne


302 appréciations
Hors-ligne
Bonjour et Kyû et 

Dernière modification le dimanche 12 Février 2017 à 11:40:09
Ce sujet est fermé, vous ne pouvez pas y répondre
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie Petits conseils.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 5728 autres membres