cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv headernumbered-list123split-screen
user profile image

The badges provided by all store providers just don't play well together and using svg or png assets makes localization a pain.

So let's make them all visually unified, with pure text for easier localization and some web interaction styles. And different sizes with the same markup by using some modifier classes.

Read more about those badges: https://kremalicious.com/css-app-store-badges/

Grab them as npm or bower package or just explore the source: https://github.com/kremalicious/appstorebadges

Comments

  1. I don't like how some of them extend off to the right a bit but I suppose it can't be helped.

    Nice work!

  2. Daniel, thanks! Indeed, the width is bugging me too but it's the only way to make them look ok if they're stacked on top of each other, like in a mobile view. When not using the Mac App Store or Windows Store badges, all remaining ones can be made a bit shorter in width.

    Wrote bout some of the styling and how you can use those buttons here: https://kremalicious.com/css-app-store-badges/

  3. I'm finding in chrome the text goes blurry on hover

  4. Hussein, yeah, known problem. Using scale transform for this and WebKit/Blink treats this as texture rather than vector in order to provide hardware acceleration. Not using scale for this effect is tricky cause everything else, like changing width/height/font-size affects layout so in some views buttons would jump around in layout

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...