dalemyers/social-media-buttons.html

## social-media-buttons.html
<html>
    <head>
        <title>Social Media Test</title>
        <style>
            body{
                /*background: #000;*/
            }

            #content{
                width: 600px;
                margin: auto;
            }

            #social-media{
                font-family: "Arial", sans-serif;
                padding: 0px;
                margin: 0px;
                width: 100%;
                height: 66px;
                /*background: #FFAAAA;*/
            }

            .social-spacer{
                /*background: #FFFF00;*/
                display: block;
                float: left;
                height: 100%;
                width: 20px;
            }

            .social-button{
                display: block;
                float: left;
                height: 100%;
                width: 60px;
            }

            .social-logo-container{
                width: 50px;
                height: 34px;
                padding: 5px;
            }

            .social-logo{
                height: 34px;
            }

            .social-number-container{
                width:48px;
                height: 20px;
                padding-right: 6px;
                padding-left: 6px;
                padding-top: 2px;
                background-color: rgba(255, 255, 255, 0.5);
                text-align: center;
            }

            .social-number{
                width: 48px;
                height: 18px;
                background: #FFF;
                border-radius: 9px;
            }

            #social-twitter{
                background: #2daae1;
            }

            #social-facebook{
                background: #3b579d;
            }

            #social-googleplus{
                background: #cd3420;
            }

            #social-hn{
                background: #ff6600;
            }

            #social-reddit{
                background: #9dc9f9;
            }

            #social-twitter .social-logo{
                background-image: url('social-icons/twitter.png');
            }

            #social-facebook .social-logo{
                background-image: url('social-icons/facebook.png');
            }

            #social-googleplus .social-logo{
                background-image: url('social-icons/googleplus.png');
            }

            #social-hn .social-logo{
                background-image: url('social-icons/hn.png');
            }

            #social-reddit .social-logo{
                background-image: url('social-icons/reddit.png');
            }

        </style>
    </head>
    <body>
        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id nisl in purus ornare hendrerit sit amet in arcu. Duis accumsan nunc quis ligula blandit, vitae placerat nisi semper. Integer lobortis ac leo a facilisis. Praesent sodales ex nisi, ut bibendum nulla aliquet porta. Maecenas id nibh in diam rhoncus dictum in a lacus. Aenean efficitur nisl vel lacus congue tempus. Ut at pellentesque elit. Nunc leo mi, consectetur vitae nibh et, aliquet varius elit. Etiam rhoncus, turpis non tempus gravida, ligula nunc eleifend dui, vitae condimentum augue augue sed odio. Phasellus et tempus lectus. Maecenas venenatis a erat mollis aliquam. Mauris eget lacus nec turpis pellentesque elementum. Praesent luctus, velit sit amet porttitor blandit, metus nunc tempus nisl, at porta lorem urna vel est. In egestas congue sapien nec laoreet.</p>
            <p>Pellentesque lobortis pharetra magna, id varius urna dignissim non. Nunc pharetra, mauris a ultrices tristique, nibh velit ultricies eros, eget aliquam erat eros eu velit. Praesent augue quam, egestas sed nibh sed, molestie efficitur nisl. Morbi nec facilisis justo, ut pharetra mi. Sed pulvinar vestibulum vehicula. In volutpat nec ex ut faucibus. Nulla eros ante, semper non erat eu, iaculis faucibus lacus. Integer ex felis, porta et dignissim eu, blandit vitae arcu. Curabitur vitae pretium ante. Pellentesque dapibus libero vel magna egestas, laoreet congue metus laoreet.</p>
            <div id="social-media">

                <div class="social-button" id="social-twitter">
                    <div class="social-logo-container">
                        <div class="social-logo"></div>
                    </div>
                    <div class="social-number-container">
                        <div class="social-number">
                            888
                        </div>
                    </div>
                </div>

                <div class="social-spacer"></div>

                <div class="social-button" id="social-facebook">
                    <div class="social-logo-container">
                        <div class="social-logo"></div>
                    </div>
                    <div class="social-number-container">
                        <div class="social-number">
                            888
                        </div>
                    </div>
                </div>

                <div class="social-spacer"></div>

                <div class="social-button" id="social-googleplus">
                    <div class="social-logo-container">
                        <div class="social-logo"></div>
                    </div>
                    <div class="social-number-container">
                        <div class="social-number">
                            888
                        </div>
                    </div>
                </div>

                <div class="social-spacer"></div>

                <div class="social-button" id="social-hn">
                    <div class="social-logo-container">
                        <div class="social-logo"></div>
                    </div>
                    <div class="social-number-container">
                        <div class="social-number">
                            888
                        </div>
                    </div>
                </div>

                <div class="social-spacer"></div>

                <div class="social-button" id="social-reddit">
                    <div class="social-logo-container">
                        <div class="social-logo"></div>
                    </div>
                    <div class="social-number-container">
                        <div class="social-number">
                            888
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
	<html>
	<head>
	<title>Social Media Test</title>
	<style>
	body{
	/background: #000;/
	}

	#content{
	width: 600px;
	margin: auto;
	}

	#social-media{
	font-family: "Arial", sans-serif;
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 66px;
	/background: #FFAAAA;/
	}

	.social-spacer{
	/background: #FFFF00;/
	display: block;
	float: left;
	height: 100%;
	width: 20px;
	}

	.social-button{
	display: block;
	float: left;
	height: 100%;
	width: 60px;
	}

	.social-logo-container{
	width: 50px;
	height: 34px;
	padding: 5px;
	}

	.social-logo{
	height: 34px;
	}

	.social-number-container{
	width:48px;
	height: 20px;
	padding-right: 6px;
	padding-left: 6px;
	padding-top: 2px;
	background-color: rgba(255, 255, 255, 0.5);
	text-align: center;
	}

	.social-number{
	width: 48px;
	height: 18px;
	background: #FFF;
	border-radius: 9px;
	}

	#social-twitter{
	background: #2daae1;
	}

	#social-facebook{
	background: #3b579d;
	}

	#social-googleplus{
	background: #cd3420;
	}

	#social-hn{
	background: #ff6600;
	}

	#social-reddit{
	background: #9dc9f9;
	}

	#social-twitter .social-logo{
	background-image: url('social-icons/twitter.png');
	}

	#social-facebook .social-logo{
	background-image: url('social-icons/facebook.png');
	}

	#social-googleplus .social-logo{
	background-image: url('social-icons/googleplus.png');
	}

	#social-hn .social-logo{
	background-image: url('social-icons/hn.png');
	}

	#social-reddit .social-logo{
	background-image: url('social-icons/reddit.png');
	}

	</style>
	</head>
	<body>
	<div id="content">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id nisl in purus ornare hendrerit sit amet in arcu. Duis accumsan nunc quis ligula blandit, vitae placerat nisi semper. Integer lobortis ac leo a facilisis. Praesent sodales ex nisi, ut bibendum nulla aliquet porta. Maecenas id nibh in diam rhoncus dictum in a lacus. Aenean efficitur nisl vel lacus congue tempus. Ut at pellentesque elit. Nunc leo mi, consectetur vitae nibh et, aliquet varius elit. Etiam rhoncus, turpis non tempus gravida, ligula nunc eleifend dui, vitae condimentum augue augue sed odio. Phasellus et tempus lectus. Maecenas venenatis a erat mollis aliquam. Mauris eget lacus nec turpis pellentesque elementum. Praesent luctus, velit sit amet porttitor blandit, metus nunc tempus nisl, at porta lorem urna vel est. In egestas congue sapien nec laoreet.</p>
	<p>Pellentesque lobortis pharetra magna, id varius urna dignissim non. Nunc pharetra, mauris a ultrices tristique, nibh velit ultricies eros, eget aliquam erat eros eu velit. Praesent augue quam, egestas sed nibh sed, molestie efficitur nisl. Morbi nec facilisis justo, ut pharetra mi. Sed pulvinar vestibulum vehicula. In volutpat nec ex ut faucibus. Nulla eros ante, semper non erat eu, iaculis faucibus lacus. Integer ex felis, porta et dignissim eu, blandit vitae arcu. Curabitur vitae pretium ante. Pellentesque dapibus libero vel magna egestas, laoreet congue metus laoreet.</p>
	<div id="social-media">

	<div class="social-button" id="social-twitter">
	<div class="social-logo-container">
	<div class="social-logo"></div>
	</div>
	<div class="social-number-container">
	<div class="social-number">
	888
	</div>
	</div>
	</div>

	<div class="social-spacer"></div>

	<div class="social-button" id="social-facebook">
	<div class="social-logo-container">
	<div class="social-logo"></div>
	</div>
	<div class="social-number-container">
	<div class="social-number">
	888
	</div>
	</div>
	</div>

	<div class="social-spacer"></div>

	<div class="social-button" id="social-googleplus">
	<div class="social-logo-container">
	<div class="social-logo"></div>
	</div>
	<div class="social-number-container">
	<div class="social-number">
	888
	</div>
	</div>
	</div>

	<div class="social-spacer"></div>

	<div class="social-button" id="social-hn">
	<div class="social-logo-container">
	<div class="social-logo"></div>
	</div>
	<div class="social-number-container">
	<div class="social-number">
	888
	</div>
	</div>
	</div>

	<div class="social-spacer"></div>

	<div class="social-button" id="social-reddit">
	<div class="social-logo-container">
	<div class="social-logo"></div>
	</div>
	<div class="social-number-container">
	<div class="social-number">
	888
	</div>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>