Social Icon Panel

A floating social network icon box, handy for personal blogs.

by Emmanuel Garcia

HTML

<!-- Change class "white" to "black" for alternative theme for dark sites -->
    
    <div id="social-icon-panel" class="white">
        <div id="social-icon-panel-inside">
            <div id="social-left">
                <a href="http://twitter.com/" class="twitter">Twitter</a>
                <a href="http://flickr.com/photos/" class="flickr">Facebook</a>
                <a href="http://youtube.com/user/" class="youtube">Pinterest</a>
                <a href="http://forrst.com/people/" class="forrst">Language</a>
            </div>
            <div id="social-right">
                <a href="http://twitter.com/"><img width="40px" height="auto" src="http://staging.travelraintree.com/images/twitter.svg" border="0"></a>
                <a href="http://flickr.com/photos/"><img width="40px" height="auto" src="http://staging.travelraintree.com/images/facebook.svg" border="0"></a>
                <a href="http://youtube.com/user/"><img width="40px" height="auto" src="http://staging.travelraintree.com/images/pinterest.svg" border="0"></a>
                <a href="http://forrst.com/people/"><img width="40px" height="auto" src="http://staging.travelraintree.com/images/spanish.svg" border="0"></a>
            </div>
        </div>
    </div>

CSS

/* Begin Code For SOCIAL ICON PANEL */

#social-icon-panel {padding:3px; position:fixed; left:-75px; top:30%;
    -moz-border-radius:0px 3px 3px 0px;
    -webkit-border-radius:0px 3px 3px 0px;
    border-radius:0px 3px 3px 0px;}
.white {background: rgba(255, 106, 24, .9);  -moz-box-shadow: 1px 1px 4px #ddd;-webkit-box-shadow: 1px 1px 4px #ddd; box-shadow: 1px 1px 4px #ddd;}
.white #social-left a {color:#fff; font-size:18px; line-height: 230%;} 
.black {background:#222; -moz-box-shadow: 1px 1px 4px #000;-webkit-box-shadow: 1px 1px 4px #000; box-shadow: 1px 1px 4px #000;}
.black #social-left a {color:#fff;} .black #social-left a:hover{background:#111;}

#social-icon-panel:hover {left: 0px; -webkit-transition: .1s linear; transition: 1s linear;}
#social-right {width: 36px; float:right; padding-right:5px;}
#social-left {width:80px; padding-right:5px; float:left;}
#social-left a {display:block; font-size: 11px; padding: 2px 0px; text-decoration:none;}
#social-left a:hover {font-weight:bold; letter-spacing:-1px; }
.twitter:hover {color: #4099ff; font-size:25px !important;}
.flickr:hover {color: #3b5998 !important;}
.youtube:hover {color: #c92228 !important;}
.forrst:hover {color: #bc0030 !important;}