Skip to content

Instantly share code, notes, and snippets.

@DJHartley

DJHartley/Social Icons (again).markdown

Created September 28, 2015 01:37
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. DJHartley created this gist Sep 28, 2015.
    11 changes: 11 additions & 0 deletions Social Icons (again).markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    Social Icons (again)
    --------------------
    More social icons.. :)

    Forked from [Ondřej Page Bárta](http://codepen.io/PageOnline/)'s Pen [Social Icons (again)](http://codepen.io/PageOnline/pen/eBdjl/).

    Forked from [Ondřej Page Bárta](http://codepen.io/PageOnline/)'s Pen [Social Icons (again)](http://codepen.io/PageOnline/pen/eBdjl/).

    A [Pen](http://codepen.io/DJHartley/pen/pjNaNW) by [Derek Hartley](http://codepen.io/DJHartley) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/DJHartley/pen/pjNaNW/license).
    5 changes: 5 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div class="social">
    <a href="http://facebook.com/ondrej.p.barta" class="link facebook" target="_parent"><span class="fa fa-facebook-square"></span></a>
    <a href="https://twitter.com/PageOnlineXS" class="link twitter" target="_parent"><span class="fa fa-twitter"></span></a>
    <a href="https://plus.google.com/+OndřejBárta-Otaku" class="link google-plus" target="_parent"><span class="fa fa-google-plus-square"></span></a>
    </div>
    68 changes: 68 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    body {
    background: #222 url("http://25.media.tumblr.com/a408ad9af259cf827ed4599d60bcb0a9/tumblr_myebwtELvb1st5lhmo1_1280.jpg") no-repeat fixed center;
    background-size: cover;
    overflow: hidden;
    }

    .social {
    position: absolute;
    width: 100%;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
    }

    .social .link {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px dashed white;
    background-clip: content-box;
    padding: 10px;
    transition: .5s;
    color: #D7D0BE;
    margin-left: 15px;
    margin-right: 15px;
    text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.2);
    font-size: 70px;
    }

    .social .link span {
    display: block;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    .social .link:hover {
    padding: 20px;
    color: white;
    margin-left: -5px;
    transform: translateX(10px) rotate(360deg);
    }

    .social .link.google-plus {
    background-color: tomato;
    color: white;
    }

    .social .link.twitter {
    background-color: #00ACEE;
    color: white;
    }

    .social .link.facebook {
    background-color: #3B5998;
    color: white;
    }