J'ai conçu un bouton pour un site Web et j'ai essayé d'ajouter transform: scale (0.95); sur un événement de clic (en utilisant le sélecteur CSS : activate ).
<input type="submit" value="Show more recipes" class="btn"/>
a.btn, input[type="submit"].btn, label.btn, button.btn {
text-transform: uppercase;
border: solid 1px #282828;
font-size: 11px;
line-height: 17px;
}
a.btn:active, input[type="submit"].btn:active, label.btn:active, button.btn:active {
transform: scale(0.95);
}
Si l'utilisateur clique sur la bordure du bouton, l'état : actif réduit l'icône et le curseur ne recouvre plus le bouton, et ne déclenche probablement plus l'événement de clic. Si l'utilisateur clique dans la zone échelle (0,95) , l'événement de clic est déclenché normalement.
J'essaie de conserver l'événement de clic; J'ai essayé d'appliquer un panneau invisible : before sans succès, car input [type = 'submit'] ne le prend pas en charge, et j'espérais que quelqu'un a déjà résolu ce problème.
Modifier le 14 janvier: le problème a été réécrit maintenant en utilisant input [type = 'submit'] qui ne peut pas contenir d'éléments.
p>
5 Réponses :
Lorsque vous utilisez l'événement click , vous attendez en fait les événements mousedown et mouseup et vous le perdez simplement sur le partie mouseup .
utilisez l'événement moousedown et cela fonctionnera pour vous.
Changez votre ligne en: document.getElementById ('moreRecipes'). addEventListener ('mousedown', showMore);
Bonne chance.
Oh oui, c'est vrai! Je n'y ai pas pensé comme ça, mais je m'inquiète si l'utilisateur veut le faire glisser ou cliquer et attendre qu'il n'agira pas comme prévu ... essaiera probablement un autre hack mais merci pour votre réponse 👍
Ensuite, vous pouvez placer votre bouton dans un div et attendre l'événement mouseup sur le div , cela fonctionnera car vous ne changez que la taille de le bouton, et la taille de la div reste permanente.
Certains éléments ne seront pas pilotés par JavaScript, comme les liens ou les éléments input ['submit'] , pourraient être bien pour réécrire la question je suppose 👍
Vous pouvez facilement contourner ce problème
Rendre le contenu (aspect du bouton) avec un autre élément dans le bouton ou l'ancre, et placer la transformation sur le nouvel élément à l'intérieur du bouton. De cette façon, lorsque vous cliquez sur le bouton, vous obtenez la transformation et le déclenchement js puisque le bouton réel ne rétrécit pas
voici un exemple simple
<button id="moreRecipes" class="btn"> <span>Show more recipes</span> </button>
button.btn span {
text-transform: uppercase;
border: solid 1px #282828;
font-size: 11px;
line-height: 17px;
display: block;
}
button.btn:active span {
transform: scale(.95);
}
document.getElementById('moreRecipes').addEventListener('click', function() {
alert("clicked");
});
Excellente suggestion, fonctionnerait certainement et résoudrait mon cas, merci beaucoup Je vais essayer de trouver un moyen sans modifier le HTML en utilisant : after et : before peut être ... puisque ce bouton est déjà utilisé PARTOUT ce serait plus facile 😆, mais devrait être bien. Merci 🙌.
Désolé mais devra rouvrir cette question, votre solution ne fonctionne pas avec les éléments input [type = 'submit'] 😭.
c'est maintenant une question complètement différente, je vous suggère de la poser comme nouveau message. De plus, les boutons d'envoi input ne sont pas si simples à utiliser. Vous pouvez utiliser la solution pour votre bouton et soumettre facilement le formulaire via js
: actif indéfiniment Il existe un moyen de faire en sorte que : active continue indéfiniment ou jusqu'à ce que l'utilisateur clique sur quelque chose d'autre qui devient : actif code >.
transition: 0,5s sur input:active input : 99999s` La transition d'entrée vers transform: scale (0.95) prend 0,5 s le la transition vers la normale prendra environ 28 heures ou jusqu'à ce que l'utilisateur clique sur quelque chose qui devient :active.
BTW si vous voulez un bouton d'envoi qui peut contenir du contenu alors: p >
<button type="submit" class="btn">Show more recipes</button> <input type='submit' class='btn' value='Show more recipes'>
Un bouton d'envoi est généralement utilisé pour envoyer un formulaire, ce qui signifie que la page entière se recharge. Je suppose que vous n'utilisez pas de formulaire. Si tel est le cas, utiliser un bouton d'envoi a autant d'utilité qu'un bouton normal.
.btn {
text-transform: uppercase;
border: solid 1px #282828;
font-size: 11px;
line-height: 17px;
transition: 99s;
transform: scale(1);
}
.btn:active {
transform: scale(.95);
transition: 0.7s;
}
<button type='submit'>Show more recipe</button>
Ce n'est pas la meilleure solution, mais la seule chose à laquelle je puisse penser ne signifie pas réécrire tout votre code HTML.
Utilisez une ombre de boîte pour simuler une bordure. Maintenant, augmentez la bordure réelle, définie sur transparente, pour obtenir les événements de clic.
Dans l'extrait de code, j'ai changé la couleur de la bordure (enfin, l'ombre incrustée) en rouge et défini une couleur bleue transparente partielle à la frontière, pour rendre la façon dont cela fonctionne plus clair.
En remarque, vous n'avez pas besoin de correspondre parfaitement à la dimension finale, même si elle est un peu plus grande que nécessaire ne sera pas perceptible.
<input type="submit" value="Show more recipes" class="btn"/>
a.btn, input[type="submit"].btn, label.btn, button.btn {
text-transform: uppercase;
border: solid 0px rgba(0,0,255,0.1); /* should be transparent */
box-shadow: inset 0px 0px 0px 2px red;
font-size: 30px;
line-height: 40px;
}
input[type="submit"].btn:active {
transform: scale(.95);
border-top-width: 5px;
border-bottom-width: 5px;
border-right-width: 14px;
border-left-width: 14px;
margin-top: -5px;
margin-left: -14px;
}
Même idée :) J'utiliserais rgba (0,0,0,0.01) au lieu de transparent juste au cas où IE11 ignorerait des choses parfaitement transparentes (j'ai eu une mauvaise expérience en cliquant sur un initialement fond transparent qui serait ignoré comme s'il y avait des événements-pointeurs: aucun dessus>. <)
J'espère que vous plaisantez que ce bouton est déjà utilisé PARTOUT. :)
Supposons que nous ayons un défi technique et que notre objectif est d'appliquer la règle transform: scale (0.95); au bouton au clic.
Nous ne pouvons pas changer le bouton par lui-même pour des raisons "inconnues".
La seule pseudo-classe qui peut nous aider est : active . Cela fonctionne sur les éléments d'ancrage et de bouton lorsqu'ils sont activés.
La solution serait d'envelopper le bouton dans un élément d'ancrage et d'écrire un sélecteur.
a: entrée active ['submit'] {...}
J'ai mis à jour l'extrait. La zone grise montre où un utilisateur peut cliquer pour appliquer la pseudo-classe. Vous pouvez ajuster la taille de cette zone et supprimer l'arrière-plan gris.
<a class="wrapper"> <input type="submit" value="Show more recipes" class="btn"/> </a>
a.btn, input[type="submit"].btn, label.btn, button.btn {
text-transform: uppercase;
border: solid 1px #282828;
font-size: 11px;
line-height: 17px;
}
.wrapper:active input[type="submit"],
a.btn:active, input[type="submit"].btn:active, label.btn:active, button.btn:active {
transform: scale(0.95);
}
.wrapper {
padding: 10px;
background: gray;
}
BTW, j'ai un cours sur Sélecteurs CSS si vous souhaitez en savoir plus.
Faites le contenu (bouton look) avec un autre élément dans le bouton ou l'ancre, et placez la transformation sur le nouvel élément à l'intérieur du bouton. De cette façon, lorsque vous cliquez sur le bouton, vous obtenez la transformation et le déclenchement js puisque le bouton réel ne rétrécit pas
@sebastienbarbier pouvez-vous créer un jsfiddle. Je ne vois aucun problème sur le bouton, cliquez ici est mon violon