timhuisman / css-social-media-buttons Goto Github PK

Add a MySpace button (as .myspace) using the current favicon as icon. Two variations possible: blue background with white icon or grey background with white icon (more New MySpace).

Adding content in the button will cause it to break: the icon and the :after layer are pushed down and start halfway the button, while the content is beneath the :before layer.

Possible solutions might be the use of overflow: hidden, position: absolute (instead of position: relative on the :before and :after layer) and text-indent: -9999px

Add a third Github button (as .github-alt2) using the current favicon as icon.

Perhaps it would be interesting to use an icon font (for example IcoMoon) instead of image sprites. Thoughts?

Pros

• Removes the need of constantly updating four images (the source files and sprites).
• No extra effort needed to make icons look good on Retina screens.
• Better scalability (in case I or anyone else ever decides to change the size of the buttons).

Cons

• Icons have the tendency to become 'pixelated' (not really the right word for it) when becoming smaller. Especially on non-Retina screens.
• Dependent on available icons: how they look and which are available.
• Only single color icons: meaning that the whole icon is in the same color.

Hey there, @timhuisman, any chance you can make some buttons for Medium? I'd love to send a PR, but I can't for the life of me figure out how to create the icons. Thanks in advance!

Add social-buttons.min.less and social-buttons.min.scss (duplicate of existing file) for easier compiling of the LESS and SCSS into a minified and unminified version.

Add a second Foursquare button (as .foursquare-alt) using the icon used on blog as icon. Two variations possible: white icon on a blue background (see picture) or white background with blue icon (as used in the favicon of the Foursquare blog).

Add a second Facebook button (as .facebook-alt) using the favicon as icon: with the 'f' stuck in the rightbottom corner and a light blue beam.

Hello,

Would it be possible to add a .large class that makes the buttons larger? I was able to accomplish this artificially using the following css:

.csmb.large, .csmb-flat.large {
  background-image: url("../images/icon-sprite-x2.png");
  height: 56px;
  width: 56px;
  background-size: auto !important;
}

However, as you might imagine, this makes the images look pixelated on retina devices.

Thank you for a wonderful product! This is the best CSS sprite and css I have found so far 😄

Add a third YouTube button (as .youtube-alt2) using the current favicon as icon.

Do you think a button is missing or an alternative version of an existing button is needed? Let me know in this issue! Or when feeling adventurous: add them yourself (Fork away!), but please let me know which button you are working on.

! Please add an image for reference when making a request.