[Résolu] Modifier un bouton d'action et un bouton télécharger
3 participants
Page 1 sur 1
[Résolu] Modifier un bouton d'action et un bouton télécharger
Bonjour,
Ici ma page.
Et voici mon code, travaillé depuis un modèle gradient de ZeTuto :
Sur la partie hover, il faudrait que je puisse entrer la font-color en noir #000000.
Peut-être faut-il également que je déplace ma couleur verte #62A64E du "Général" vers le mode normal puisque cette couleur est celle du background en mode actif.
Je ne sais pas comment m'y prendre...
Pouvez-vous m'aider ?
Ici ma page.
Et voici mon code, travaillé depuis un modèle gradient de ZeTuto :
- Code:
<style type="text/css">
/*<![CDATA[*/
/*bouton d'action gradient black green style 2 */
.j-calltoaction-link-style-2 {-webkit-border-radius:7px;-moz-border-radius:7px;-ms-border-radius:7px;-o-border-radius:7px;border-radius:7px !important;text-shadow:0 -1px 0px rgba(0, 0, 0,
0.25);border:none;padding:5px 18px 6px 18px;font-size:14px;font-family:"Lucida Grande",Arial,Verdana,san-serif;color:#62A64E !important;text-decoration:none
!important;display:inline-block;cursor:pointer}
.j-calltoaction-link-style-2 {background:#424242;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #424242), color-stop(100%, #000000));background:-webkit-linear-gradient(#424242,#000000);background:-moz-linear-gradient(#424242, #000000);background:-o-linear-gradient(#424242, #000000);background:linear-gradient(#424242, #000000);overflow:hidden;*zoom:1;border:1px solid #424242;border-bottom-color:#000000 !important;}
.j-calltoaction-link-style-2:hover {background:#62A64E;background:-webkit-gradient(linear, 50% 0%, 50% 100%,color-stop(0%,#62A64E),color-stop(100%,#62A64E));background:-webkit-linear-gradient(#62A64E,#62A64E);
background:-moz-linear-gradient(#62A64E,#62A64E);
background:-o-linear-gradient(#62A64E,#62A64E); background:linear-gradient(#62A64E,#62A64E);border-bottom-color:#000000}
/*]]>*/
</style>
Sur la partie hover, il faudrait que je puisse entrer la font-color en noir #000000.
Peut-être faut-il également que je déplace ma couleur verte #62A64E du "Général" vers le mode normal puisque cette couleur est celle du background en mode actif.
Je ne sais pas comment m'y prendre...
Pouvez-vous m'aider ?
Dernière édition par Solie le Sam 12 Sep 2015 - 12:59, édité 1 fois (Raison : ajout de la balise Résolu)
Re: [Résolu] Modifier un bouton d'action et un bouton télécharger
Bonjour,
pour la couleur du texte, il suffit de "font-color:#000000 !important;" ou "color:#000000 !important;" :
Par contre, je ne comprends pas votre deuxième question, que pensez vous en disant mode "normal" ?
pour la couleur du texte, il suffit de "font-color:#000000 !important;" ou "color:#000000 !important;" :
- Code:
<style type="text/css">
/*<![CDATA[*/
.j-calltoaction-link-style-2 {
-webkit-border-radius:7px;-moz-border-radius:7px;-ms-border-radius:7px;-o-border-radius:7px;
border-radius:7px !important;text-shadow:0 -1px 0px rgba(0, 0, 0,
0.25);border:none;padding:5px 18px 6px 18px;font-size:14px;font-family:"Lucida Grande",Arial,Verdana,san-serif;color:#62A64E !important;text-decoration:none
!important;display:inline-block;cursor:pointer;background:#424242;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #424242), color-stop(100%, #000000));background:-webkit-linear-gradient(#424242,#000000);background:-moz-linear-gradient(#424242, #000000);background:-o-linear-gradient(#424242, #000000);background:linear-gradient(#424242, #000000);overflow:hidden;*zoom:1;border:1px solid #424242;border-bottom-color:#000000 !important;
}
.j-calltoaction-link-style-2:hover {
color:#000000 !important;
background:#62A64E;background:-webkit-gradient(linear, 50% 0%, 50% 100%,color-stop(0%,#62A64E),color-stop(100%,#62A64E));background:-webkit-linear-gradient(#62A64E,#62A64E);
background:-moz-linear-gradient(#62A64E,#62A64E);
background:-o-linear-gradient(#62A64E,#62A64E); background:linear-gradient(#62A64E,#62A64E);border-bottom-color:#000000;
}
/*]]>*/
</style>
Par contre, je ne comprends pas votre deuxième question, que pensez vous en disant mode "normal" ?
Re: [Résolu] Modifier un bouton d'action et un bouton télécharger
Je pense Non-actif. A l'affichage de la page, sans la souris.
Merci bien, je vais essayer votre code de suite...
Merci bien, je vais essayer votre code de suite...
Re: [Résolu] Modifier un bouton d'action et un bouton télécharger
A d'accord, j'ai cru que vous parliez déjà de non-actif en disant mode "général".Solie a écrit:Je pense Non-actif. A l'affichage de la page, sans la souris.
Merci bien, je vais essayer votre code de suite...
Re: [Résolu] Modifier un bouton d'action et un bouton télécharger
Oui, j'ai un peu de mal avec les termes Lol
J'ai mis votre code. Avec !important, ça fonctionne parfaitement, le noir est pris en compte.
Merci beaucoup ZeTuto
Il ne me reste plus qu'à trouver un code plus efficace pour enlever le soulignage des liens. Le mien n'a aucun effet pour les boutons. Je vais voir tout ça !
J'ai mis votre code. Avec !important, ça fonctionne parfaitement, le noir est pris en compte.
Merci beaucoup ZeTuto
Il ne me reste plus qu'à trouver un code plus efficace pour enlever le soulignage des liens. Le mien n'a aucun effet pour les boutons. Je vais voir tout ça !
Re: [Résolu] Modifier un bouton d'action et un bouton télécharger
genre :
- Code:
#content_area a:active,#content_area a:hover, #content_area a:active {
text-decoration: none !important;
}
Re: [Résolu] Modifier un bouton d'action et un bouton télécharger
Hey Fred ! Tu arrives à point
Avant que je rentre le code... c'est normal a:active deux fois sur la zone de contenu ?
Avant que je rentre le code... c'est normal a:active deux fois sur la zone de contenu ?
Re: [Résolu] Modifier un bouton d'action et un bouton télécharger
Tu as raison C'est un doublon inutile. J'ai fait vite
Je rappelle qu'on ne risque rien à rentrer toutes sortes de codes sans modifier le Head, (du moment qu'on sauvegarde d'anciennes versions)
Et vous pouvez les essayer d'abord dans l'inspecteur. Cela ne change le site qu'en consultation temporaire, pour vous seul.
Je rappelle qu'on ne risque rien à rentrer toutes sortes de codes sans modifier le Head, (du moment qu'on sauvegarde d'anciennes versions)
Et vous pouvez les essayer d'abord dans l'inspecteur. Cela ne change le site qu'en consultation temporaire, pour vous seul.
liens soulignés
J'ai enlevé mon code original...
<link rel="stylesheet" type="text/css" href="http://www.snipzookeeper.com/29011301serv/16PX79700231/license79700231node0011ZHfdLeYHaKlzAXnLzxdnQsga.css" />
... pour le remplacer par le tien et avoir ainsi un seul code pour tous les liens dans le head :
ça marchait sur les boutons ! plus sur les liens textes.
J'ai tenté d'ajouter un a:link, sans être sûre que c'est le bon truc, comme ceci :
C'est pareil ; boutons ok, textes pas ok.
J'imagine que le a:link est mal formulé. Pourtant, c'est bien sur le content que je le souhaite.
Je suis perdue
<link rel="stylesheet" type="text/css" href="http://www.snipzookeeper.com/29011301serv/16PX79700231/license79700231node0011ZHfdLeYHaKlzAXnLzxdnQsga.css" />
... pour le remplacer par le tien et avoir ainsi un seul code pour tous les liens dans le head :
- Code:
<style type="text/css">
/*<![CDATA[*/
/* supprimer les liens soulignes */
#content_area a:active, #content_area a:hover {
text-decoration: none !important;
}
/*]]>*/
</style>
ça marchait sur les boutons ! plus sur les liens textes.
J'ai tenté d'ajouter un a:link, sans être sûre que c'est le bon truc, comme ceci :
- Code:
<style type="text/css">
/*<![CDATA[*/
/* supprimer les liens soulignes */
.content_area a:active .content_area a:hover .content_area a:link {text-decoration: none !important;}
/*]]>*/
</style>
C'est pareil ; boutons ok, textes pas ok.
J'imagine que le a:link est mal formulé. Pourtant, c'est bien sur le content que je le souhaite.
Je suis perdue
Re: [Résolu] Modifier un bouton d'action et un bouton télécharger
Attention à votre code :
Il manque la séparation entre les différentes class des éléments à styler : .content_area a:active, .content_area a:hover, .content_area a:link
Soit :
<style type="text/css">
/*<![CDATA[*/
/* supprimer les liens soulignes */
.content_area a:active .content_area a:hover .content_area a:link {text-decoration: none !important;}
/*]]>*/
</style>
Il manque la séparation entre les différentes class des éléments à styler : .content_area a:active, .content_area a:hover, .content_area a:link
Soit :
- Code:
<style type="text/css">
/*<![CDATA[*/
/* supprimer les liens soulignes */
.content_area a:active, .content_area a:hover, .content_area a:link {text-decoration: none !important;}
/*]]>*/
</style>
liens soulignés
Oups, je me souviendrai des virgules. Merci ZeTuto
J'ai mis le code corrigé, ça n'agit toujours que sur les boutons. Et aucun effet sur les liens textes .
Comment faire ?
J'ai mis le code corrigé, ça n'agit toujours que sur les boutons. Et aucun effet sur les liens textes .
Comment faire ?
Re: [Résolu] Modifier un bouton d'action et un bouton télécharger
Pour les liens simples de votre site, le plus simple devrait fonctionner :
- Code:
a:link {text-decoration: none !important;}
Re: [Résolu] Modifier un bouton d'action et un bouton télécharger
Exact. Vive la simplicité !
Merci de votre aide.
J'en profite pour saluer les excellents tutos "boutons" de votre site. Ils sont compatibles avec les nouveaux designs, customisables à volonté, et c'est super !
- Code:
<style type="text/css">
/*<![CDATA[*/
/* supprimer les liens soulignes */
.content_area a:active, .content_area a:hover, a:link {text-decoration: none !important;}
/*]]>*/
</style>
Merci de votre aide.
J'en profite pour saluer les excellents tutos "boutons" de votre site. Ils sont compatibles avec les nouveaux designs, customisables à volonté, et c'est super !
Modifier un bouton Télécharger
Bonsoir,
Me voici de nouveau, pour un bouton "Télécharger" cette fois-ci.
Ici, ma page.
Ici, le modèle flat du bouton Télécharger :
Je souhaiterais que le bouton soit de couleur #F68C1F avec un border-top-width: 2px en solid et de couleur #F15128 .
Voici où j'en suis dans mon code :
J'ai remplacé le border-bottom-color par border-top-color, mais rien ne se passe. Je précise qu'en laissant border-bottom-color, aucune bordure orange n'apparait en bas non plus...
J'ai tenté de virer cette ligne et de la remplacer par
border:solid; border-top-width:2px; border-top-color:#F15128}
avec, ou sans !important... rien à faire.
Y aurait-il dans le code quelque chose qui empêche les modifs ? J'ai tenté de remplacer le border:none du début par border:solid... C'est pareil, mon bouton est tout jaune tournesol, mais sans la border-top-color orange.
Alors si vous voyez un truc qui cloche dans le code, n'hésitez pas les amis
Me voici de nouveau, pour un bouton "Télécharger" cette fois-ci.
Ici, ma page.
Ici, le modèle flat du bouton Télécharger :
- Code:
<style type="text/css">
/*<![CDATA[*/
/* Un bouton de téléchargement rose code zetuto.com */
.cc-m-download-link {-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;text-shadow:0 -1px 0px rgba(0, 0, 0,
0.25);border:none;padding:5px 18px 6px 18px;font-size:14px;font-family:"Lucida Grande",Arial,Verdana,san-serif;color:white !important;text-decoration:none
!important;display:inline-block;cursor:pointer}
.cc-m-download-link
{background:#FF358B;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #FF358B), color-stop(100%, #FF358B));background:-webkit-linear-gradient(#FF358B,
#FF358B);background:-moz-linear-gradient(#FF358B, #FF358B);background:-o-linear-gradient(#FF358B, #FF358B);background:linear-gradient(#FF358B, #FF358B);overflow:hidden;*zoom:1;border:1px
solid #FF358B;border-bottom-color:#FF358B}
.cc-m-download-link:hover {background:#FF358B;background:-webkit-gradient(linear, 50% 0%, 50%
100%,color-stop(0%,#FF358B),color-stop(100%,#FF358B));background:-webkit-linear-gradient(#FF358B,#FF358B);background:-moz-linear-gradient(#FF358B,#FF358B);background:-o-linear-gradient(#FF358B,#FF358B);background:linear-gradient(#FF358B,#FF358B);border-bottom-color:#FF358B}
.cc-m-download-link:active {background:#FF358B;text-shadow:none}
/*]]>*/
</style>
Je souhaiterais que le bouton soit de couleur #F68C1F avec un border-top-width: 2px en solid et de couleur #F15128 .
Voici où j'en suis dans mon code :
- Code:
<style type="text/css">
/*<![CDATA[*/
/* bouton de téléchargement tournesol habillage */
.cc-m-download-link {-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px !important;text-shadow:0 -1px 0px rgba(0, 0, 0,
0.25);border:solid;padding:5px 18px 6px 18px;font-size:14px;font-family:"Lucida Grande",Arial,Verdana,san-serif;color:black !important;text-decoration:none
!important;display:inline-block;cursor:pointer}
.cc-m-download-link
{background:#F68C1F;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #F68C1F), color-stop(100%, #F68C1F));background:-webkit-linear-gradient(#F68C1F,
#F68C1F);background:-moz-linear-gradient(#F68C1F, #F68C1F);background:-o-linear-gradient(#F68C1F, #F68C1F);background:linear-gradient(#F68C1F, #F68C1F);overflow:hidden;*zoom:1; border:1px;
solid #F15128;border-top-color:#F15128}
.cc-m-download-link:hover {background:#FCBB01;background:-webkit-gradient(linear, 50% 0%, 50%
100%,color-stop(0%,#FCBB01),color-stop(100%,#FCBB01));background:-webkit-linear-gradient(#FCBB01,#FCBB01);background:-moz-linear-gradient(#FCBB01,#FCBB01);background:-o-linear-gradient(#FCBB01,#FCBB01);background:linear-gradient(#FCBB01,#FCBB01);border-bottom-color:#FCBB01}
.cc-m-download-link:active {background:#FCBB01;text-shadow:none}
/*]]>*/
</style>
J'ai remplacé le border-bottom-color par border-top-color, mais rien ne se passe. Je précise qu'en laissant border-bottom-color, aucune bordure orange n'apparait en bas non plus...
J'ai tenté de virer cette ligne et de la remplacer par
border:solid; border-top-width:2px; border-top-color:#F15128}
avec, ou sans !important... rien à faire.
Y aurait-il dans le code quelque chose qui empêche les modifs ? J'ai tenté de remplacer le border:none du début par border:solid... C'est pareil, mon bouton est tout jaune tournesol, mais sans la border-top-color orange.
Alors si vous voyez un truc qui cloche dans le code, n'hésitez pas les amis
Re: [Résolu] Modifier un bouton d'action et un bouton télécharger
Bonsoir,
Bon, je ne sais pas si c'est le résultat que vous souhaitez avoir (visuellement), mais en tout cas en ajoutant !important et en enlevant certaines anomalies, cela fonctionne très bien.
- Code:
<style type="text/css">
/*<![CDATA[*/
/* bouton de téléchargement tournesol habillage */
.cc-m-download-link {-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px !important;text-shadow:0 -1px 0px rgba(0, 0, 0,
0.25);border:solid;padding:5px 18px 6px 18px;font-size:14px;font-family:"Lucida Grande",Arial,Verdana,san-serif;color:black !important;text-decoration:none
!important;display:inline-block;
cursor:pointer;background:#F68C1F;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #F68C1F), color-stop(100%, #F68C1F));background:-webkit-linear-gradient(#F68C1F,
#F68C1F);background:-moz-linear-gradient(#F68C1F, #F68C1F);background:-o-linear-gradient(#F68C1F, #F68C1F);background:linear-gradient(#F68C1F, #F68C1F);overflow:hidden;*zoom:1; border:1px solid #F15128 !important;border-top-color:#F15128 !important;border-top-width:2px !important;}
.cc-m-download-link:hover {background:#FCBB01;background:-webkit-gradient(linear, 50% 0%, 50%
100%,color-stop(0%,#FCBB01),color-stop(100%,#FCBB01));background:-webkit-linear-gradient(#FCBB01,#FCBB01);background:-moz-linear-gradient(#FCBB01,#FCBB01);background:-o-linear-gradient(#FCBB01,#FCBB01);background:linear-gradient(#FCBB01,#FCBB01);border-bottom-color:#FCBB01 !important}
.cc-m-download-link:active {background:#FCBB01;text-shadow:none}
/*]]>*/
</style>
Bon, je ne sais pas si c'est le résultat que vous souhaitez avoir (visuellement), mais en tout cas en ajoutant !important et en enlevant certaines anomalies, cela fonctionne très bien.
Re: [Résolu] Modifier un bouton d'action et un bouton télécharger
Oui, ça fonctionne très bien. La border-top est prise en compte. J'ai juste changé la réf. couleur de la bordure générale et c'est exactement le résultat que je souhaitais.
Je vous remercie ZeTuto !
Je vous remercie ZeTuto !
Sujets similaires
» [Résolu] Remplacer l'image du bouton retour vers le haut
» Bouton lien vers un n° de tél. [resolu]
» [Résolu] Bouton retour vers le haut
» Modifier la couleur d'un seul bouton du menu navigation.
» Modifier la police d'écriture bouton formulaire et blog
» Bouton lien vers un n° de tél. [resolu]
» [Résolu] Bouton retour vers le haut
» Modifier la couleur d'un seul bouton du menu navigation.
» Modifier la police d'écriture bouton formulaire et blog
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum