Sunday, February 8, 2015

Mobile friendly, better fonts, CSS3 button export

Big update on Da Button Factory this week-end!

Our online button generator is now mobile-compliant. Previously the rendering & usability on non-PC devices was horrible. But from now, the button editor works well on smartphones and tablets:

The list of available fonts has been revamped. A bunch were added, some were “removed”. What that means is that some of the older fonts are no more displayed by default in the “Font” drop-down list. But if you saved/bookmarked the URL of an editing workspace that used one of these old fonts, they will appear again. We are backward-compatible on that.
We wanted to carefully pick a good selection of fonts, that offers variety in style and works well for different use-cases, but without having an overwhelming choice (less is more). That is why some of the old fonts got removed; they were statistically the least used, and/or the most problematic (only display well for a narrow range of text sizes, not pretty in the bold/italic variants, etc.)
Also, the fonts are now categorized by “family” (sans-serif, serif, fantasy/cursive): this should help in exploring them.

The button maker now outputs CSS 3 code instead of the out-of-date CSS declarations that were previously generated. Browsers change quite a lot since 2009 but we did not touch the CSS generation since then. This is now corrected!

An old, apparently unnoticed, bug in the padding handling was discovered and corrected. Previously the button text could be wrongly cropped if it contained characters that go under the baseline (j, p, q, etc.) and if the vertical padding was too small:
Now it works without problem. But to correct this bug, the handling of paddings has to completely changed, and a button with a vertical padding of, say, 10px, in the new version will appear significatively taller than in the old version. We do not break backward-compatibility for previously generated button images that are hotlinked somewhere on the web: they will display as previously. But if you saved a button workspace and access it again, the padding will have visibly changed. No big deal though, just reduce it and the button will render as previously.

That’s all for the big things. Minor things include:
  • the editor look was refreshed. A new color picker, easier-to-use, is now in place.
  • the example buttons changed
  • the navigation changed; a new “Info” page is now present, API & Contact are less prominent


  1. Your button maker is great; thanks for making it freely available!
    One request - please consider adding a "caption alignment" choice (left, right center). This would leave room to add an image on the button alongside the text. Thank you.

    1. You can use Imagefu button maker ( ) if you need more advanced options. It supports setting the text alignment.

  2. Having trouble getting the button to save as a jpeg or png file format and NOT lose the clearness of the font. It's very grainy and extremely blurry once saved. It's saving to my downloads, I then open it in Photoshop to make sure the sizing is correct for my website. Even if I do not adjust the sizing and leave as it is directly from your site, the font still is not clear and it doesn't look good. Any suggestions?

    1. Your issue is unusual and strange. Are you sure you are not seeing the button zoomed in Photoshop, hence the blurriness of the text? Otherwise, could you email me ( ) the button so that I can try to see what’s wrong?