How to use ?
- Download and upload it on your server.
-Paste the code between the head tag in your header, with the good path & save
<link rel="stylesheet" href="/ui.css" type="text/css" media="all" />
Code - Boutons groupés
<a class="left gkbutton" href="#button">My new button</a><a class="middle gkbutton" href="#button">My new button</a><a class="right gkbutton" href="#button">My new button</a>
Result
My new buttonMy new buttonMy new button
Code - Groupés/simplifiés
<a class="left gkbutton" href="#button">My new button</a><a class="right gkbutton" href="#button">My new button</a>
Result
Code - Animation 2 (seulement sous webkit)
<a class="animation2 gkbutton" href="#button">My new button</a>
Result
Code - Coins arrondis
<a class="rounded gkbutton" href="#button">My new button</a>
Result
Code - Utilisation de :target
<a class="b2 gkbutton" id="bell" href="#bell">My new button</a>
11 commentaires !
akhlan says:
août 4, 2011
Salut,
débutant, je ne sais pas comment l’installer
Valentin says:
août 4, 2011
Salut !
Je viens de mettre à jour la page avec les instructions de bases.
Pour faire simple :
- Télécharge le fichier
- Envoi-le sur ton serveur
- Colle le code donnée dans le haut de ta page entre la balise head
- Renseigne le chemin d’accès du fichier à la place de /ui.css
- Enregistre :)
akhlan says:
août 4, 2011
ça fonctionne nickel, merci à toi Valentin ;)
Hiper-tofu says:
août 7, 2011
On peux faire un menu déroulant avec c’est bouton, si oui comment ? Merci d’avance.
Valentin says:
août 7, 2011
Il suffit d’ajouter class=”gkbutton” aux liens du menu déroulant. Normalement c’est bon aussi :)
Hiper-tofu says:
août 10, 2011
A oui, voila ce que j’ai fais :) : http://yndustries.fr/dofusmotion/
Hank from Android network toolkit says:
août 21, 2011
Je trouve tes boutons super sympa, le mien “lire la suite” ne fait rien au passage de la souris… par contre je ne sais pas comment les installés :(
Lukas says:
nov 5, 2011
Bonjour Valentin, je trouve vraiment génial ce petit gadget, mais le seul hic c’est qu’il ne marche pas sous IE, y a t-il une solution pour cela? merci beaucoup
Akhlan says:
nov 8, 2011
Salut Valentin,
je me suis inspiré de ton code gplus afin de mettre en place des boutons personnalisés au couleurs Windows, MacOS et Linux, si tu veux rajouter ça à ton css pas de soucis, c’est à toi ;-)
Une démo visible ici:
http://s150525350.onlinehome.fr/akhlan_psm/telechargements-2/ps3-media-server-1-40-0/
Et le code (png inclus):
span.moteur { display:inline-block; width:16px; height:16px; position:relative; background-image:url(‘http://s150525350.onlinehome.fr/akhlan_psm/images/moteur.png’);background-repeat:no-repeat;}
span.linux { background-position: 0px -17px;margin: auto 10px -.30em auto;}
span.windows { background-position: 0px 0px;margin: auto 10px -.30em auto;}
span.macos { background-position: 0px -34px;margin: auto 10px -.38em auto;}
Akhlan
akhlan says:
jan 23, 2012
Hello,
j’ai un problème que je n’arrive pas à résoudre…
d’abord, allez voir mes boutons sur cette page si vous voulez bien…
http://www.leslapinsmorts.com/ps3mediaserver/ps3-media-server-1-50-0-r1000
Pourquoi lorsque sous WordPress, je passe de l’éditeur HTML à Visuel, ma mise en page change?
en HTML, je mets ce code et tout se passe bien
7-zip v9.20
et dès que je passe par Visuel, la section disparaît et du coup, je perds ma mise en forme :-(
Vous auriez une solution ?
Rgds
Akhlan
Gisele Subire says:
fév 16, 2012
Perfeito, Só falta funcionar Cross Browser :D
Qu'est-ce que vous en pensez ? :)