New button design coming!

In the last months the share-like buttons floating around the net has confirmed to a more standardized format. We also have not been satisfied with the design of our button so here comes new buttons!

The new button will not only change design it will also change size a bit. So you know what happened if the button does not fit your page design.

The new buttons will look like this:

(Sizes are: 55 x 62px and 110 x 20px)

We will also change the look of the static button making it more unique in appearance, two badge like button are also added:

The behaviors are the same as before, but with the new design we hope to clarify that behavior for new users.

The update will come live quite soon. Hope you like it!

24
Comments

24 Responses to New button design coming!

  1. Daniel says:

    The new font and the colors are… ehm… ugly. Any chance that there will be an option to use the old buttons?

  2. sprain says:

    Sorry guys, but the «Flattr this!» text on the new buttons is quite ugly, don’t you think so? I like the speech bubble thing, but leave the text as it is, please!

  3. Well that means i need 5 more pixel it seems.

    Are there plans to have a default static button that is replaced by the dynamic button if javascript is enabled?

    Currently no Flattrbutton is shown if a browser has Javascript disabled.

  4. Dirk Einecke says:

    I like the new design. Nice little glossy effect! Can’t wait.

  5. Dragan says:

    Could you offer this in other colors as well? I think the shapes and the logotype are strong enough to recognize you. But the colors are … well … Best would be to put some color hex values in the URL.

  6. Moritz says:

    1337 times flattred. Hooray :D

  7. Shred says:

    Will the new button images just replace the old ones? Or will there be new values for the JavaScript “button” parameter?

  8. GENiALi says:

    Nice but too big.

  9. HRJ says:

    I second Dragan’s suggestion. A choice of colors would be nice.

    About the new design… I don’t like it at all. The Flattr font is unreadable especially the “F”. And the text doesn’t seem to be antialiased.

    And it seems to take too much visual space.

    And well, it just doesn’t look elegant, compared to the original.

  10. linus says:

    All existing JS buttons will be updated, automatically.

    Colors might come in the future for now we want the button to be easily recognized.

  11. Pingback: Flattr: neue Buttons sind da | Geld verdienen im Web 2.0

  12. markus says:

    Are the static versions of the buttons available somewhere? I.e. a replacement for these:
    http://api.flattr.com/button/button-static-50×60.png
    http://api.flattr.com/button/button-compact-static-100×17.png

    Regarding the new design, I’ll have to agree with the previous commenters – I like the speech bubble thing, but the font is just ugly, sorry.

  13. Manu says:

    Not cool, guys, not cool at all. I don’t mind the new design, looks fine.
    But you can’t just make such a change with only one day prior notice. Even on your own blog the design is broken as of now, because the WordPress plugin has not yet been updated. Very unprofessional behavior, and that does not suit you well.

  14. Is it just me or the 0.5.0 javascript produces the new buttons but with the size of the old ones? :/

  15. Pingback: t3n-Linktipps: WP7-Kill-Switch, Datenkraken-Duell, State of the Mobile Apps, Flattr-Button und 12 Geek-Hochzeit-Gadgets » t3n News

  16. vmasto says:

    What d’you guys mean you don’t like the font? It’s the same font as the flattr logo for crying out loud.

  17. ReFlattr says:

    It’s very nice, I love this typeface.
    J’aime bien, très jolie typographie :)

  18. hans|k says:

    :-(

    Great Job Flattr, really! What on earth got into you when you decided to remotely break web designs by increasing button sizes overnight?!

    [Flattr -1] if I had the option here

  19. Pingback: Hässliche neue Flattr-Buttons! Oder einfach nur Gewohnheit. | The Green Bird

  20. odeo says:

    yes it is the same font as the flattr logo, but its a difference if you use big font sizes or squeeze it into 14pt. The Logotype indeed looks pretty neat but the font in the button gets too unreadable because it isn´t designed to be used in such small sizes.
    the first few letter are hard to recognise… youve got to look twice at it to see that its an F and an l instead of an A.
    it´s difficult to read at all.

  21. Dragan says:

    Dudes, even in this very post the flattr button looks crappy because the iFrame is too small. Look: http://img717.imageshack.us/img717/2959/screenshot141.png

    And the “ed” of “flattred” looks really crammed compared to the other characters.

  22. SomeGuy says:

    There’s one thing I’d like to point out: The button’s (not to mention the site’s) colour scheme is the kind that might confuse even a slightly colour blind user if one is not careful. The red and the green are so light that they can be easily mixed between the two for a colourblind person. This is especially true now with the buttons in the wishlist, where you really have to look to see if it’s green or red. You can use a filter to see what I mean: http://www.vischeck.com/vischeck/vischeckImage.php

    Not that it really affects the site currently, but probably useful to know just in case.

  23. Pingback: Ein halbes Jahr Flattr – eine kleine Bilanz « Andreas Grieß // Blog