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>