The markup and styling of 14 social sharing buttons.
A Pen by Andor Nagy on CodePen.
Forked from andornagy/14-Flat-Social-Buttons-with-CSS.markdown
Created
May 14, 2014 17:19
-
-
Save elizabethsusan/c36952fc95521c58007a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a class="button facebook" href="#">Facebook</a> | |
| <a class="button twitter" href="#">Twitter</a> | |
| <a class="button googleplus" href="#">Google+</a> | |
| <a class="button pinterest" href="#">Pinterest</a> | |
| <a class="button stumbleupon" href="#">Sumbleupon</a> | |
| <a class="button linkedin" href="#">LinkedIn</a> | |
| <a class="button pocket" href="#">Pocket</a> | |
| <a class="button reddit" href="#">Reddit</a> | |
| <a class="button tumblr" href="#">Tumblr</a> | |
| <a class="button rss" href="#">RSS Feed</a> | |
| <a class="button path" href="#">Path</a> | |
| <a class="button hootsuite" href="#">HootSuite</a> | |
| <a class="button github" href="#">GitHub</a> | |
| <a class="button behance" href="#">Behance</a> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Styling the base of the buttons | |
| */ | |
| .button { | |
| width:120px; | |
| display:block; | |
| padding:10px; | |
| margin:15px; | |
| float:left; | |
| font-size:18px; | |
| font-weight:bold; | |
| text-align:center; | |
| text-decoration:none; | |
| color:#FFF; | |
| } | |
| /* | |
| * Changing the background color for each button | |
| */ | |
| .facebook { background:#3b5998; } | |
| .twitter { background:#00acee; } | |
| .googleplus { background:#dd4b39; } | |
| .pinterest { background:#c8232c; } | |
| .stumbleupon { background:#f74425; } | |
| .linkedin { background:#0e76a8; } | |
| .pocket { background:#ee4056; } | |
| .reddit { background:#ff4500; } | |
| .tumblr { background:#34526f; } | |
| .rss { background:#ee802f; } | |
| .path { background:#e41f11; } | |
| .hootsuite { background:#003366; } | |
| .github { background:#171515; } | |
| .behance { background:#005cff; } | |
| /* | |
| * Changing the background color for each button on hover | |
| */ | |
| .facebook:hover { background:#2f4679; } | |
| .twitter:hover { background:#0089bd; } | |
| .googleplus:hover { background:#b03b2d; } | |
| .pinterest:hover { background:#9f1b23; } | |
| .stumbleupon:hover { background:#c4361d; } | |
| .linkedin:hover { background:#0b5e85; } | |
| .pocket:hover { background:#bd3344; } | |
| .reddit:hover { background:#cb3600; } | |
| .tumblr:hover { background:#294158; } | |
| .rss:hover { background:#bd6625; } | |
| .path:hover { background:#b5180d; } | |
| .hootsuite:hover { background:#002851; } | |
| .github:hover { background:#121010; } | |
| .behance:hover { background:#0049cb; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment