JavaScript Library for Pixel-Based Scaling

Hover over the links in this site's header: they all grow by the same number of pixels, whatever their width. That's JS-Lib-Scale, a small JavaScript library I wrote for exactly this.

The problem with CSS scale

The scale property works relative to the element's size. With scale(1.1), a 100px button grows by 10px and a 200px one by 20px. In a row of buttons of different sizes the hover effect looks uneven, and CSS has no way to say "grow by 10 pixels".

How it works

You give it pixels, not a factor. ButtonScale measures every element that matches the selector and works out the scale factor for that size, so each button grows or shrinks by exactly the pixels you asked for. One instance handles every element the selector matches.

Installation

Load it from jsDelivr. This is the version this site uses:

<script src="https://cdn.jsdelivr.net/gh/FrancescoCiannavei/JS-Lib-Scale@1.0.1/library/main.min.js"></script>

Usage

Create an instance with a CSS selector and pixel values. Positive values grow the element, negative values shrink it.

<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>

Options

• hoverScale: pixels to add or remove on hover.
• clickScale: pixels to add or remove on click.
• maxScale: the largest factor allowed, so a small element can't grow too much.
• minScale: the smallest factor allowed, so it can't shrink too much.

new ButtonScale('.my-button', {
  hoverScale: 15,
  clickScale: -10,
  maxScale: 1.2,   // never larger than 1.2x
  minScale: 0.9    // never smaller than 0.9x
});

Three buttons, same pixels

A complete example with three 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/FrancescoCiannavei/JS-Lib-Scale@1.0.1/library/main.min.js"></script>
    <script>
        new ButtonScale(".scaleButton", {
            hoverScale: 10,
            clickScale: -3,
        });
    </script>
</body>
</html>

All three grow by 10 pixels on hover and shrink by 3 pixels on click, despite their different sizes.

From 0.0.1 to 1.0.1

The first version had only hoverScale and clickScale. Since then I've added the maxScale and minScale limits and a Jest test suite that covers the scale calculation, the hover and click handlers, the limits and the edge cases. With 1.0.0 I marked the library stable, with no breaking changes: code written for 0.0.1 still works.

The documentation and a live demo are on GitHub Pages, and the code is in the GitHub repository.