Interactive Social Media Buttons

My goal for these social media buttons was to respect each brand’s guidelines as much as possible while keeping the entire set as consistent as possible. Everything is 100% coded and real, you can check it out for yourself at http://timsilva.com/

Nerdy details: I found that this design doesn’t work as well on dark backgrounds because the Facebook and Pinterest logos have openings that would require deciding between keeping the “f” and “p” negative spaces as white or transparent on the hover states. While filling the negative space with white is ideal, that creates both white and colored edges around the logos which takes away from the consistency of the entire set. I initially designed these social buttons in May of last year (http://timsilva.com/archive/version/11.0/) with enclosing boxes around each logo. That version was a nice alternative, but the current version lets each brand’s logo be the only feature (Plus it uses the actual logos, not pieces from them which the brands often dislike. For example, I used the Facebook “f” as a standalone logo, when their brand guidelines clearly discourage doing that). The added tooltip and color-appropriate hover/active states provide context for the lesser known brands (Last.fm and DeviantArt aren’t as popular amongst the younger crowds). As a nice detail, I made sure to include the name of the networks in larger buttons for the mobile-friendly responsive state since tooltips aren’t as useful on small screen touch devices. I have iterated on the animation timing, bounce, and delay for a long time. The unfortunate reality about CSS-based animations that not many people talk about is that the animations are randomly inconsistent. Sometimes browsers will skip frames or run sequences at different speeds no matter what we do it seems.