article:
Elements Design & Code: Blackboard Login (PSD / HTML / CSS)
article:
UI: Minimal Blue UI Kit (PSD)

Elements Design & Code: Flat Social Links Buttons (PSD / HTML / CSS)

Advertisement

Today, I bring you another beautiful and modern flat social buttons psd template. As you know flat design is the latest trend now a days and as a designer I feel you’d love this freebie.


Screenshot

flat social links buttons - facebook, twitter, google plus

Resource: Flat Social Links Buttons (PSD / HTML / CSS)


Implementations

HTML
<div id="social-links">
    <ul>
        <li><span class="ifacebook"><img src="images/facebook.png"></span><a href="#" class="afacebook">sign in with facebook</a></li>
        <li><span class="itwitter"><img src="images/twitter.png"></span><a href="#" class="atwitter">sign in with twitter</a></li>
        <li><span class="igoogleplus"><img src="images/googleplus.png"></span><a href="#" class="agoogleplus">sign in with google+</a></li>
    </ul>
</div>


CSS
#social-links {
    margin: 50px 0 0 0;
    padding: 0 15px 25px 25px;
    background: #000000;
    overflow: hidden;
}
    #social-links ul li {
        width: 250px;
        font-family: 'Oswald', sans-serif;
        font-size: 14px;
        text-transform: uppercase;
        margin-top: 20px;
    }
    #social-links ul li span.ifacebook,
    #social-links ul li span.itwitter,
    #social-links ul li span.igoogleplus {
        display: inline-table;
        width: 41px;
        text-align: center;
    }
    #social-links ul li span.ifacebook { background: #354f88; padding: 7px 0 9px 0; }
    #social-links ul li span.itwitter { background: #40a2d1; padding: 10px 0 10px 0; }
    #social-links ul li span.igoogleplus { background: #ce3e26; padding: 10px 0 10px 0; }
    #social-links ul li a.afacebook,
    #social-links ul li a.atwitter,
    #social-links ul li a.agoogleplus {
        display: inline-table;
        color: #ffffff;
        text-decoration: none;
        margin: 0;
        width: 200px;
        text-align: center;
    }
    #social-links ul li a.afacebook { background: #3b5998; padding: 10px 0 9px 0; }
    #social-links ul li a.atwitter { background: #45b0e3; padding: 10px 0 10px 0; }
    #social-links ul li a.agoogleplus { background: #de4c34; padding: 10px 0 10px 0; }
    #social-links ul li a.afacebook:hover { background: #354f88; }
    #social-links ul li a.atwitter:hover { background: #40a2d1; }
    #social-links ul li a.agoogleplus:hover { background: #ce3e26; }


Screenshot

demo link
Resource: Flat Social Links Buttons (PSD / HTML / CSS)


Web Fonts:

This resource is very easy to customize.

Whatever your use, we hope you enjoy it.



demo
download html/css
download psd
source html
source psd

Advertisement
Tags: flat, social links, social, links, buttons, facebook, twitter, googleplus, google plus, google, design, layout, psd, html, css, interface, elements, webfonts, font, lato, oswald, google web fonts, web fonts, creative, creative3x

Leave a Comment

No Comment

© Creative3x Ltd.