Libreria JavaScript per Scaling Pixel-Based
7 Gen. 2026
JS-Lib-Scale: Animazioni di Scala per Bottoni Basate sui Pixel
Quando si aggiungono effetti hover ai bottoni, la proprietà CSS scale ha una limitazione frustrante: funziona solo con percentuali relative alle dimensioni dell'elemento, non con valori fissi in pixel. Questo significa che scale(1.1) su un bottone di 100px lo ingrandisce di 10px, ma lo stesso scale su un bottone di 200px lo ingrandisce di 20px—risultando in animazioni inconsistenti nella tua interfaccia.
JS-Lib-Scale risolve questo problema permettendoti di specificare esattamente di quanti pixel un bottone deve crescere o restringersi al passaggio del mouse e al click.
Installazione
Includi la libreria tramite CDN:
<script src="https://cdn.jsdelivr.net/gh/Franky5831/JS-Lib-Scale@0.0.1/library/main.js"></script>
Utilizzo
La libreria usa un'API semplice basata su classi. Crea una nuova istanza di ButtonScale con un selettore CSS e i valori di scala:
<button class="scaleButton">Cliccami</button>
<script>
new ButtonScale(".scaleButton", {
hoverScale: 15, // Ingrandisci di 15px all'hover
clickScale: -5, // Riduci di 5px al click
});
</script>Tutto qui. La libreria calcola automaticamente il fattore di scala corretto basandosi sulle dimensioni effettive di ogni bottone, così ogni bottone cresce esattamente dello stesso numero di pixel indipendentemente dalla sua dimensione originale.
Opzioni
OpzioneDescrizionehoverScale | Pixel da scalare al passaggio del mouse (positivo = ingrandisci, negativo = riduci)
clickScale | Pixel da scalare al click (positivo = ingrandisci, negativo = riduci)
Esempio Pratico
Ecco un esempio completo con più bottoni di dimensioni diverse:
<!DOCTYPE html>
<html>
<head>
<style>
.btn-small { padding: 8px 16px; }
.btn-medium { padding: 12px 24px; }
.btn-large { padding: 16px 32px; }
</style>
</head>
<body>
<button class="scaleButton btn-small">Piccolo</button>
<button class="scaleButton btn-medium">Medio</button>
<button class="scaleButton btn-large">Grande</button>
<script src="https://cdn.jsdelivr.net/gh/Franky5831/JS-Lib-Scale@0.0.1/library/main.js"></script>
<script>
new ButtonScale(".scaleButton", {
hoverScale: 10,
clickScale: -3,
});
</script>
</body>
</html>Nonostante le loro diverse dimensioni, tutti e tre i bottoni cresceranno esattamente di 10 pixel all'hover e si ridurranno di 3 pixel al click.
