+ Répondre à la discussion Actualité déjà publiée
  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 650
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 650
    Points : 91 552
    Points
    91 552
    Billets dans le blog
    20

    Par défaut Les boutons graphiques en CSS



    Aujourd'hui, Pascale Lambert nous propose une astuce sous forme de mini tutoriel qui nous montre comment créer un bouton design à l'aide d'image et de CSS. Le bouton en image qui change d'aspect au passage de la souris est très utilisé sur les pages web. Longtemps, la majorité de ces boutons graphiques étaient animés par un JavaScript ou pire (car plus lourd) par un applet java. Avec les CSS, par effet "rollover", la légèreté et la simplicité est de mise pour créer de beaux boutons.

    N'hésitez pas à faire part de vos remarques, questions et encouragements à la suite de ce message.

    Voir aussi les cours et tutoriels pour apprendre CSS.

    Merci à elle
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 858
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 858
    Points : 16 232
    Points
    16 232

    Par défaut

    C'est sympa quand on veut donner à un lien l'aspect d'un bouton, mais il faut éviter de faire l'inverse, c'est-à-dire remplacer un bouton de formulaire par un lien stylisé.

  3. #3
    Inactif
    Avatar de Kerod
    Profil pro
    Inscrit en
    septembre 2004
    Messages
    11 674
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2004
    Messages : 11 674
    Points : 20 408
    Points
    20 408

    Par défaut

    Exact mais il n'empêche que la technique pour un bouton de formulaire est quasiment identique

  4. #4
    Rédacteur
    Avatar de Halleck
    Homme Profil pro
    Consultant PHP
    Inscrit en
    mars 2003
    Messages
    597
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Consultant PHP

    Informations forums :
    Inscription : mars 2003
    Messages : 597
    Points : 872
    Points
    872

    Par défaut

    C'est sympa, mais pourquoi ne pas profiter de l'occasion pour parler des sprites CSS rapidement ? Ca éviterait ce clignotement au premier survol...

    Encore une fois, très bonne série de tutos sinon
    Zend PHP Certified Engineer, Certifié Symfony2
    blog : blog.lepine.pro
    Secrétaire de l'AFUP (Association des Utilisateurs de PHP)

  5. #5
    Candidat au Club
    Profil pro
    Inscrit en
    août 2007
    Messages
    2
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : août 2007
    Messages : 2
    Points : 2
    Points
    2

    Par défaut

    Hey :-),

    J'ai réalisé ce test il y a un bon moment. Une façon autrement sympa et plus actuelle de styliser des boutons CSS (ou d'en faire avec des liens) : http://development.android-bay.net/D...SX_button.html.

  6. #6
    Inactif
    Avatar de Kerod
    Profil pro
    Inscrit en
    septembre 2004
    Messages
    11 674
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2004
    Messages : 11 674
    Points : 20 408
    Points
    20 408

    Par défaut

    Pour parler de Sprites CSS, il y a déjà un exemple ici : http://christophe-f.developpez.com/t...oins-arrondis/

  7. #7
    Expert confirmé
    Avatar de Thes32
    Homme Profil pro
    Développeur PHP, .Net, T-SQL
    Inscrit en
    décembre 2006
    Messages
    2 379
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Développeur PHP, .Net, T-SQL

    Informations forums :
    Inscription : décembre 2006
    Messages : 2 379
    Points : 4 843
    Points
    4 843

    Par défaut

    Bel article

    Citation Envoyé par Bisûnûrs Voir le message
    ...mais il faut éviter de faire l'inverse, c'est-à-dire remplacer un bouton de formulaire par un lien stylisé.
    Pourquoi donc ?
    Développeur | Zend Certified Engineer

    Étapes Pour mieux se servir du forum:
    1. Commencez par lire les cours et tutoriels ;
    2. Faites une recherche;
    3. Faites un post si rien trouvé dans les deux étapes précédentes en respectant les règles;

    Nix>_Rien n'est plus pratique que la théorie

  8. #8
    Inactif
    Avatar de Kerod
    Profil pro
    Inscrit en
    septembre 2004
    Messages
    11 674
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2004
    Messages : 11 674
    Points : 20 408
    Points
    20 408

    Par défaut

    Tout d'abord parce que ce n'est pas prévu pour ça et que deuxièmement tu dois utiliser du JavaScript pour soumettre le formulaire et du coup au niveau accessibilité ce n'est pas l'idéal d'autant plus que tu as le risques que le JavaScript soit désactivé.

    Maintenant si tu vois autre chose Bisûnûrs ...

  9. #9
    Membre régulier
    Homme Profil pro
    Webmaster
    Inscrit en
    septembre 2007
    Messages
    105
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : septembre 2007
    Messages : 105
    Points : 109
    Points
    109

    Par défaut

    Pour évité le sintillement lors du premier hover j'utilise un image avec tout les aspect possible un par dessus lautre Ex:

    Et ensuite dans le css je change le background-position tout simplement lors du hover.
    Donc puisque l'image est charger au début, aucun sintillement!

  10. #10
    Membre habitué Avatar de eckerdecker
    Profil pro
    Inscrit en
    décembre 2009
    Messages
    134
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : France

    Informations forums :
    Inscription : décembre 2009
    Messages : 134
    Points : 181
    Points
    181

    Par défaut

    input type submit stylisé avec du css :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    input[type=submit] {
    	border:0;
    	padding:0;
    	margin:0;
    	color:#444;
    	font-weight:bold;
    	width:156px;
    	height:31px;
    	padding-bottom:3px;
    	background:url(bouton.gif) no-repeat;
    	background-position:top left;
    	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size:13px;
    	cursor:pointer;
    }
    input[type=submit]:hover {
    	background-position:bottom left;
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="submit" value="Envoyer" />
    Quelques améliorations pour être cross-browser sont surement à apporter, le :hover sur le input n'est pas franchement valide mais avec un peu de javascript à la place ça passe
    Images attachées Images attachées  

  11. #11
    Inactif
    Avatar de Kerod
    Profil pro
    Inscrit en
    septembre 2004
    Messages
    11 674
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2004
    Messages : 11 674
    Points : 20 408
    Points
    20 408

    Par défaut

    Citation Envoyé par Webselect Voir le message
    Pour évité le sintillement lors du premier hover j'utilise un image avec tout les aspect possible un par dessus lautre Ex:

    Et ensuite dans le css je change le background-position tout simplement lors du hover.
    Donc puisque l'image est charger au début, aucun sintillement!
    C'est ce qu'on appelle Sprite CSS

  12. #12
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 858
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 858
    Points : 16 232
    Points
    16 232

    Par défaut

    Citation Envoyé par Kerod Voir le message
    Maintenant si tu vois autre chose Bisûnûrs ...
    Juste insister sur le "pas prévu pour ça" : Chaque élément sa propre utilité, c'est ce qui s'appelle aussi sémantique et ce n'est pas à négliger !

Discussions similaires

  1. Réponses: 1
    Dernier message: 26/08/2010, 14h17
  2. Les boutons graphiques en CSS
    Par Kerod dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 22/07/2010, 09h32
  3. CSS pour ne pas griser les bouton radio en mode 'disabled'
    Par niko73 dans le forum Mise en page CSS
    Réponses: 10
    Dernier message: 16/01/2009, 11h05
  4. grande marge devant les boutons de mes Menus+Css
    Par paradeofphp dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 12/09/2006, 14h49
  5. [CSS] personnaliser les boutons des balises INPUT
    Par Leviathan_72 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 08/11/2005, 16h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo