• Boutons

     Un sujet tout bête auquel j'ai pensé ce matin, car je vais réaliser un montage qui va utiliser des éléments cliquables "input".

    Je sais qu'il existe, sur le net et gratuitement, des boutons de différentes formes mais les réaliser soi-même est aussi motivant.

    Un bouton cliquable peut s'écrire: <input type="text"> et, en l'identifiant, on peut le positionner, le dimensionner et le décorer.

    Pour la forme, on peut, comme dans les deux premiers exemples ci-dessous, utiliser l'attribut clip-path qui découpe l'image placée en fond; un site bien pratique est:

    https://bennettfeely.com/clippy/

     


    mon exemple:

    <div style="width: 400px; height: 200px; margin: 50px auto; text-align: left; border: 1px solid black;"><input id="sty1" type="text" /><input id="sty2" type="text" /><input id="sty3" type="text" /></a></div>
    <style><!--
    #sty1{position:absolute; z-index:1; width:80px; height:80px; transform:translate(50px,50px); background:url('http://ekladata.com/BfmC3mWqn19f1KAuYUXnZuUjdVM/anime-148.gif'); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);}
    #sty2{position:absolute; z-index:1; width:60px; height:60px; transform:translate(150px,50px); background:url('http://ekladata.com/m2u93zX1EWQFY2mopSxzL4PO0yU/anime-511.gif'); clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);}
    #sty3{position:absolute; z-index:1; width:60px; height:60px; border-radius:50%;box-shadow:inset 3px 3px 6px black, inset -3px -3px 6px white;transform:translate(250px,50px); background:url('http://ekladata.com/p6MGjUFNr0JKVglGxc8e_SlC9r0/anime-378.gif'); }
    --></style>

     

    On peut également placer des images dans les boutons, dont la forme est celle de votre choix et reprendre les % des clip-path pour les transformer en rectangulaire au clic ou au survol.

    Pour cela, le site cité ci-dessus est bien utile.