• Boutons

    Vous avez peut-être utilisé la nouvelle version de la Médiathèque Ekla, qui reprend la totalité de nos fichiers hébergés, ce qui la rend longue à charger.

    Pour ma part, j'avais créé des dossiers (textures, boutons, menus..) et ils se retrouvent perdus dans les fichiers de mes hébergements par année/mois/jour car le rangement est désormais par ordre alphabétique.

    Comme j'utilise pas mal de boutons pour mes montages, les retrouver n'est pas toujours facile, même si rien n'a été perdu, et les héberger de nouveau est refusé car le fichier existe déjà ... mais où ? Le net regorge de sites qui proposent des boutons variés, qu'il faut héberger pour avoir une adresse; on peut en créer par code html et donc éviter l'hébergement.

    Alors je vais me constituer un stock de boutons personnels, créés en code html5/CSS, que je complèterai au fur et à mesure de mes besoins et si cela vous donne des idées de création, de modification ou de copie, ne vous gênez pas !

    J'ai déjà constitué un petit stock de textures, hébergées dans un dossier de la Médiathèque, afin de remplir certains boutons.

    Dans un montage, on peut placer les boutons selon le style et la structure du montage; on doit donc pouvoir modifier un type de bouton pour l'adapter au besoin.

    Un point sur lequel je reviendrai: si vous avez plusieurs boutons identiques à mettre dans votre montage, avec chacun une action différente (changement d'image), vous pouvez écrire le code du type de bouton par son identification (class="") et écrire son action personnelle par son identification individuelle (id="").

    Les boutons peuvent être, en majorité, ronds, ovale, rectangulaires avec ou non les angles arrondis.

    Ils peuvent être animés ou non et encore animés au survol; ils peuvent comporter un nom ou un repère quelconque ou être "nus".

    Je vais donc préparer quelques pages, qui me serviront avant tout pour mes montages (charité bien ordonnée commence par soi-même) et si vous voulez copier le code html pour le placer dans vos montages, j'en serais flatté.


    Un bouton peut n'être qu'une lettre, un chiffre ou un rond:

    A

    <p style="width: 40px; font-size: 30pt; font-weight: bold; color: lime; text-shadow: 1px 1px black;">A</p>


    1

    <p style="width: 40px; height: 40px; border: 3px solid white; box-shadow: 1px 1px 2px black; border-radius: 50%; text-align: center; color: white; font-size: 25pt; text-shadow: 1px 1px black; line-height: 40px;">1</p>
    Le fond est transparent pour laisser apparaître votre image.


    1

    <p style="width: 30px; height: 30px; border: 3px solid white; box-shadow: 1px 1px 2px black;  text-align: center; color: white; font-size: 20pt; text-shadow: 1px 1px black; line-height: 30px;">1</p>
    Le fond est transparent pour laisser apparaître votre image.


     

    <p style="width: 40px; height: 40px; border: 1px solid black; border-radius: 50%; background-color: lime; box-shadow: inset 0px 0px 2px white;">&nbsp;</p>
    Si vous voulez insérer un repère dans le bouton, écrivez-le à la place de:&nbsp;


    A

    <p style="width: 40px; height:40px; border: 1px solid black; border-radius: 50%; background: url('http://ekladata.com/Ux3YknLVZ-vxdNrt78dJhkfQJjY/img637.jpg'); background-size: cover; box-shadow: inset 0px 0px 0px 2px white; text-align: center; font-size: 20pt; color: white; text-shadow: 1px 1px black; ">A</p> 


    1

    <p style="width: 40px; height: 40px; border: 1px solid black; border-radius: 50%; background: url('http://ekladata.com/oxhk-jO25RjqIglEBIhi_cOlN1Y/b34.jpg'); background-size: cover; box-shadow: inset 0px 0px 0px 2px white, 2px 2px black; text-align: center; font-size: 20pt; color: white; text-shadow: 1px 1px black;">1</p>

     


    A

    <p style="width: 40px; height: 30px; border: 3px double white; border-radius: 50%; background: url('http://ekladata.com/nuax3GCjqcJr9BOwL-UvmYLO1Ao/grasses.jpg'); background-size: cover; box-shadow: inset 0px 0px 0px 2px white, 2px 2px black; text-align: center; font-size: 20pt; color: white; text-shadow: 1px 1px black;">1</p>


     

    <p id="btv" style="width: 40px; height: 40px; border: 1px solid black; border-radius: 50%; box-shadow: inset -2px -2px black, inset 2px 2px white;">&nbsp;</p>
    <style type="text/css"><!--#btv{background-color: lime;}#btv:hover{background-color:coral;}--></style>
    Survolez le bouton.

     


    1

    <p style="width: 40px; height: 30px; border: 3px ridge white; border-radius: 10px; background: url('http://ekladata.com/udSt3t2kx76gnKg6McOWlgCKpWY/red34.gif'); background-size: cover; box-shadow: inset 0px 0px 0px 2px white, 2px 2px black; text-align: center; line-height: 30px; font-size: 20pt; color: white; text-shadow: 1px 1px black;">1</p>
    avec fond animé.


    B

    <p style="float: left; width: 50px; height: 20px; border-radius: 10px; box-shadow: 2px 2px black; border: 1px solid green; background: url('http://ekladata.com/p6MGjUFNr0JKVglGxc8e_SlC9r0/anime-378.gif'); background-size: cover; text-align: center; font-size: 20pt; color: white; text-shadow: 1px 1px black; line-height: 20px;">B</p>


    Z

    <p style="float: left; width: 40px; height: 20px; border-radius: 10px; box-shadow: 2px 2px black; border: 1px solid green; background: url('http://ekladata.com/nIohw9DyFM_XcJFJ8HPC55CfphI/anime-427.gif'); background-size: cover; text-align: center; font-size: 20pt; color: blue; text-shadow: 1px 1px black; line-height: 20px;">Z</p>


    Y

    <p style="float: left; width: 30px; height: 30px; border-radius: 10px; box-shadow: 2px 2px black; border: 1px solid green; background: url('http://ekladata.com/iZLmNA2fRw1BqA2lcWAg3xfbg-E/anime-438.gif'); background-size: cover; text-align: center; font-size: 20pt; color: white; text-shadow: 1px 1px black; line-height: 30px;">Y</p>

     


    X

    Cette solution est du bricolage car, le carré est incliné de 45 degrés, pour s'afficher en losange et il faut redresser la lettre, à l'intérieur; comme vous le voyez, c'est possible mais il faut ajouter des lignes de code et pour un simple bouton, cela semble lourd.


    W

    Il est plus simple de faire un ovale vertical.
    <p style="float: left; width: 30px; height: 50px; border-radius: 50%; box-shadow: 2px 2px 2px black; border: 1px solid black; background: url('http://ekladata.com/m2u93zX1EWQFY2mopSxzL4PO0yU/anime-511.gif'); background-size: cover; text-align: center; font-size: 20pt; color: white; text-shadow: 1px 1px black; line-height: 50px;">W</p>


    V

    <p style="float: left; width: 50px; height: 30px; border-radius: 50%; box-shadow: 2px 2px 2px black; border: 1px solid black; background: url('http://ekladata.com/jVrQPGnCn2Llbun_fFnGP9tKJ_4/15c35bbb.jpg'); background-size: cover; text-align: center; font-size: 20pt; color: white; text-shadow: 1px 1px black; line-height: 30px;">V</p>


    Comme vous le voyez, on peut personnaliser ses boutons sans avoir à en charger sur le net et maintenant qu'on parle de vol de bande passante, pour les copies d'images...

    Vous remarquerez l'attribut: line-height:20px; qui permet de positionner le texte dans le bouton, en vertical, en jouant sur la valeur; le centrage horizontal est assuré par: text-align:center;