Skip to content

Instantly share code, notes, and snippets.

@AndiDittrich

AndiDittrich/social.compiled.css

Last active August 29, 2015 14:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AndiDittrich/afc6cdd2e5f1aee29795 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AndiDittrich/afc6cdd2e5f1aee29795 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Andi Dittrich revised this gist Aug 25, 2015. No changes.
  2. Andi Dittrich created this gist Aug 25, 2015.
    64 changes: 64 additions & 0 deletions social.compiled.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    /* http://andidittrich.de/2015/08/create-static-social-media-share-buttons-without-javascript.html */
    a.social-button {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    line-height: 30px;
    margin: 4px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #f0f0f0;
    overflow: hidden;
    padding: 0px;
    }
    a.social-button:hover {
    text-decoration: none;
    }
    a.social-button.twitter-button {
    background-color: #4099ff;
    }
    a.social-button.twitter-button:before {
    content: 't';
    }
    a.social-button.twitter-button:hover {
    background-color: #303030;
    }
    a.social-button.facebook-button {
    background-color: #3b5998;
    }
    a.social-button.facebook-button:before {
    content: 'f';
    }
    a.social-button.facebook-button:hover {
    background-color: #303030;
    }
    a.social-button.googleplus-button {
    background-color: #dd4b39;
    }
    a.social-button.googleplus-button:before {
    content: 'g+';
    }
    a.social-button.googleplus-button:hover {
    background-color: #303030;
    }
    a.social-button.pinterest-button {
    background-color: #c8232c;
    }
    a.social-button.pinterest-button:before {
    content: 'p';
    }
    a.social-button.pinterest-button:hover {
    background-color: #303030;
    }
    a.social-button.email-button {
    background-color: #35c05f;
    font-size: 10px;
    }
    a.social-button.email-button:before {
    content: 'mail';
    }
    a.social-button.email-button:hover {
    background-color: #303030;
    }
    58 changes: 58 additions & 0 deletions social.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    /* http://andidittrich.de/2015/08/create-static-social-media-share-buttons-without-javascript.html */
    // Social Network Color Codes
    @twitter-color: #4099ff;
    @facebook-color: #3b5998;
    @google-plus-color: #dd4b39;
    @pinterest-color: #c8232c;
    @email-color: #35c05f;

    // Generator Mixin
    .button-generator(@color, @label){
    &:before{
    content: @label;
    }

    &:hover{
    background-color: #303030;
    }

    background-color: @color;
    }

    // The Social Button
    a.social-button{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    line-height: 30px;
    margin: 4px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #f0f0f0;
    overflow: hidden;
    padding: 0px;

    &:hover{
    text-decoration: none;
    }

    // Create Button Classes using Mixin
    &.twitter-button{
    .button-generator(@twitter-color, 't');
    }
    &.facebook-button{
    .button-generator(@facebook-color, 'f');
    }
    &.googleplus-button{
    .button-generator(@google-plus-color, 'g+');
    }
    &.pinterest-button{
    .button-generator(@pinterest-color, 'p');
    }
    &.email-button{
    .button-generator(@email-color, 'mail');
    font-size: 10px;
    }
    }