JavaScript Library for Pixel-Based Scaling
7 Jan. 2026
When adding hover effects to buttons, CSS scale has a frustrating limitation: it only works with percentages relative to the element's size, not fixed pixel values. This means a scale(1.1) on a 100px button grows it by 10px, but the same scale on a 200px button grows it by 20px—resulting in inconsistent animations across your UI.
JS-Lib-Scale solves this by letting you specify exactly how many pixels a button should grow or shrink on hover and click.
Installation
Include the library via CDN:
<script src="https://cdn.jsdelivr.net/gh/Franky5831/JS-Lib-Scale@0.0.1/library/main.js"></script>
Usage
The library uses a simple class-based API. Create a new ButtonScale instance with a CSS selector and your scale values:
<button class="scaleButton">Click Me</button>
<script>
new ButtonScale(".scaleButton", {
hoverScale: 15, // Grow by 15px on hover
clickScale: -5, // Shrink by 5px on click
});
</script>That's it. The library automatically calculates the correct scale factor based on each button's actual dimensions, so every button grows by exactly the same pixel amount regardless of its size.
Options
OptionDescriptionhoverScale | Pixels to scale on mouse hover (positive = grow, negative = shrink)
clickScale | Pixels to scale on click (positive = grow, negative = shrink)
Practical Example
Here's a complete example with multiple buttons of different sizes:
<!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">Small</button>
<button class="scaleButton btn-medium">Medium</button>
<button class="scaleButton btn-large">Large</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>Despite their different sizes, all three buttons will grow by exactly 10 pixels on hover and shrink by 3 pixels on click.
