Sam Collins
5 年之前
共有 1 個檔案被更改，包括 366 行新增 和 0 行删除
分割檢視
Diff Options
-
+366 -0demo.html
+ 366
- 0
demo.html
查看文件
| @@ -0,0 +1,366 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <title>Zocial Demo | CSS3 Button Set</title> | |||
| <link rel="stylesheet" href="css/zocial.css" /> | |||
| <style> | |||
| html { | |||
| background: #f0f0eb; | |||
| } | |||
| h1, h2, p, li, label, input { | |||
| font-family: "Helvetica Neue", sans-serif; | |||
| } | |||
| p, li, label, code { | |||
| font-size: 16px; | |||
| } | |||
| input[type="text"] { | |||
| font-size: 14px; | |||
| padding: 0.2rem 0.4rem; | |||
| } | |||
| code { | |||
| background: #e0e0e5; | |||
| padding: 0.1rem 0.2rem; | |||
| border-radius: 0.25rem; | |||
| color: #555; | |||
| } | |||
| body { | |||
| background: #FFF; | |||
| box-shadow: 0 1px 1px rgba(0,0,0,0.5); | |||
| border-radius: 0 0 3px 3px; | |||
| margin: 0 auto 2em; | |||
| padding: 2em 1em; | |||
| width: 600px; | |||
| } | |||
| body .zocial { | |||
| margin: 8px 4px; | |||
| font-size: 13px; | |||
| } | |||
| h2 { | |||
| font-size: 17px; | |||
| font-weight: normal; | |||
| padding: 1em 0 0.75em; | |||
| border-bottom: 1px solid #eee; | |||
| } | |||
| #demo { | |||
| text-align: center; | |||
| } | |||
| #demo form div { | |||
| padding: 0.25rem 0; | |||
| } | |||
| </style> | |||
| </head> | |||
| <body> | |||
| <h1>Zocial Buttons</h1> | |||
| <p><a href=-"https://github.com/smcllns/css-social-buttons">Github</a></p> | |||
| <h2>Idea</h2> | |||
| <p>Create beautiful social buttons using CSS, rendering popular social icons as a font, and with minimal extra markup.<p> | |||
| <h2>Benefits</h2> | |||
| <ul> | |||
| <li>No raster images (jpeg, png) so buttons always look sharp at any size and screen resolution.</li> | |||
| <li>Easily customize the size and call to action of the buttons.</li> | |||
| <li>Easily localize button text to other languages.</li> | |||
| </ul> | |||
| <h2>Usage</h2> | |||
| <ol> | |||
| <li>Required: Add a class of <code>zocial</code> and a class for the brand of button, e.g. <code>facebook</code></li> | |||
| <li>Optional: Add a class of <code>icon</code> to display as icon instead of button</li> | |||
| <li>Optional: Change font size of the element to resize button</li> | |||
| </ol> | |||
| <p>Example:</p> | |||
| <code> | |||
| <a class="zocial facebook">Sign in with Facebook</a> | |||
| </code> | |||
| <h2>Demo</h2> | |||
| <div id="demo"> | |||
| <button class="zocial facebook" id="showcase-button">Sign in with Facebook</button> | |||
| <form onsubmit="return false;"> | |||
| <div> | |||
| <label for="font-size-range">Button Size: <span id="font-size-display">16px</span></label> | |||
| <input type="range" id="font-size-range" value="16" min="9" step="1" max="32" /> | |||
| </div> | |||
| <div> | |||
| <label for="label-input">Button Text:</label> | |||
| <input type="text" id="label-input" placeholder="Sign in with Facebook" /> | |||
| </div> | |||
| <div> | |||
| <input class="toggle-type" type="radio" name="demo" id="select-button" value="button" checked="checked" /> | |||
| <label for="select-button">Display as button</label> | |||
| </div> | |||
| <div> | |||
| <input class="toggle-type" type="radio" name="demo" id="select-icon" value="icon" /> | |||
| <label for="select-icon">Display as icon</label> | |||
| </div> | |||
| </form> | |||
| </div> | |||
| <div id="samples"> | |||
| <h2>Some Popular Buttons</h2> | |||
| <a href="#" class="zocial facebook">Sign in with Facebook</a> | |||
| <a href="#" class="zocial googleplus">Sign in with Google+</a> | |||
| <a href="#" class="zocial twitter">Sign in with Twitter</a> | |||
| <a href="#" class="zocial linkedin">Sign in with LinkedIn</a> | |||
| <a href="#" class="zocial dropbox">Sync with Dropbox</a> | |||
| <a href="#" class="zocial evernote">Clip to Evernote</a> | |||
| <a href="#" class="zocial forrst">Follow me on Forrst</a> | |||
| <a href="#" class="zocial dribbble">Sign in with Dribbble</a> | |||
| <a href="#" class="zocial cloudapp">Sign in to CloudApp</a> | |||
| <a href="#" class="zocial github">Fork me on Github</a> | |||
| <a href="#" class="zocial gitlab">Fork me on GitLab</a> | |||
| <a href="#" class="zocial spotify">Play on Spotify</a> | |||
| <a href="#" class="zocial instapaper">Read It Later</a> | |||
| <a href="#" class="zocial soundcloud">Follow me on Soundcloud</a> | |||
| <a href="#" class="zocial tumblr">Follow me on Tumblr</a> | |||
| <a href="#" class="zocial smashing">Read on Smashing Magazine</a> | |||
| <a href="#" class="zocial itunes">Available on iTunes</a> | |||
| <a href="#" class="zocial appstore">Available on the App Store</a> | |||
| <a href="#" class="zocial macstore">Available on the Mac App Store</a> | |||
| <a href="#" class="zocial android">Available on Android Market</a> | |||
| <a href="#" class="zocial pinterest">Follow me on Pinterest</a> | |||
| <a href="#" class="zocial quora">Follow me on Quora</a> | |||
| <a href="#" class="zocial lanyrd">Attend on Lanyrd</a> | |||
| <a href="#" class="zocial twitch">Sign in with Twitch</a> | |||
| <a href="#" class="zocial houzz">Sign in with Houzz</a> | |||
| <a href="#" class="zocial slack">Sign in with Slack</a> | |||
| <a href="#" class="zocial pandora">Sign in with Pandora</a> | |||
| <a href="#" class="zocial paypal">Pay with Paypal</a> | |||
| <a href="#" class="zocial amazon">Sign in with Amazon</a> | |||
| <a href="#" class="zocial skype">Call me on Skype</a> | |||
| <a href="#" class="zocial lastfm">Sign in with Last.fm</a> | |||
| <a href="#" class="zocial yelp">Write a review on Yelp</a> | |||
| <a href="#" class="zocial foursquare">Check in with foursquare</a> | |||
| <a href="#" class="zocial klout">Influence with Klout</a> | |||
| <a href="#" class="zocial wikipedia">View on Wikipedia</a> | |||
| <a href="#" class="zocial disqus">Sign in with Disqus</a> | |||
| <a href="#" class="zocial intensedebate">Sign in with IntenseDebate</a> | |||
| <a href="#" class="zocial google">Sign in with Google</a> | |||
| <a href="#" class="zocial gmail">Sign in with Gmail</a> | |||
| <a href="#" class="zocial vimeo">Upload to Vimeo</a> | |||
| <a href="#" class="zocial scribd">Read more on Scribd</a> | |||
| <a href="#" class="zocial youtube">Subscribe on YouTube</a> | |||
| <a href="#" class="zocial wordpress">Sign in with WordPress</a> | |||
| <a href="#" class="zocial songkick">Sign in with Songkick</a> | |||
| <a href="#" class="zocial posterous">Sign in with Posterous</a> | |||
| <a href="#" class="zocial eventbrite">Sign in with Eventbrite</a> | |||
| <a href="#" class="zocial flattr">Tip with Flattr</a> | |||
| <a href="#" class="zocial plancast">Follow me on Plancast</a> | |||
| <a href="#" class="zocial yahoo">Submit resume for CEO</a> | |||
| <a href="#" class="zocial ie">Download Internet Explorer 5</a> | |||
| <a href="#" class="zocial meetup">Report bugs with Meetup.com</a> | |||
| <a href="#" class="zocial openid">Learn how-to-use OpenID</a> | |||
| <a href="#" class="zocial html5">Register now for HTML6</a> | |||
| <a href="#" class="zocial aol">Chat with your parents</a> | |||
| <a href="#" class="zocial guest">Sign in as guest</a> | |||
| <a href="#" class="zocial creativecommons">View Creative Commons Licence</a> | |||
| <a href="#" class="zocial rss">Subscribe to RSS</a> | |||
| <a href="#" class="zocial chrome">Add to Chrome</a> | |||
| <a href="#" class="zocial eventasaurus">Sign up for Eventasaurus</a> | |||
| <a href="#" class="zocial weibo">Join me on Weibo</a> | |||
| <a href="#" class="zocial plurk">Sign in with Plurk</a> | |||
| <a href="#" class="zocial grooveshark">Play on Grooveshark</a> | |||
| <a href="#" class="zocial blogger">Post on Blogger</a> | |||
| <a href="#" class="zocial viadeo">Sign in with Viadeo</a> | |||
| <a href="#" class="zocial podcast">Subscribe to this Podcast</a> | |||
| <a href="#" class="zocial fivehundredpx">View Portfolio on 500px</a> | |||
| <a href="#" class="zocial bitcoin">Bitcoin accepted here</a> | |||
| <a href="#" class="zocial ninetyninedesigns">View Portfolio on 99Designs</a> | |||
| <a href="#" class="zocial pinboard">Bookmark with Pinboard</a> | |||
| <a href="#" class="zocial stumbleupon">Stumble!</a> | |||
| <a href="#" class="zocial myspace">Find me on Myspace</a> | |||
| <a href="#" class="zocial windows">Sign in with Windows Live</a> | |||
| <a href="#" class="zocial eventful">Find Events with Eventful</a> | |||
| <a href="#" class="zocial xing">Sign in with Xing</a> | |||
| <a href="#" class="zocial flickr">Upload to Flickr</a> | |||
| <a href="#" class="zocial delicious">Sign in with Del.icio.us</a> | |||
| <a href="#" class="zocial googleplay">Download from Google Play</a> | |||
| <a href="#" class="zocial opentable">Reserve with OpenTable</a> | |||
| <a href="#" class="zocial digg">Digg this</a> | |||
| <a href="#" class="zocial reddit">Share on Reddit</a> | |||
| <a href="#" class="zocial angellist">Fund us on AngelList</a> | |||
| <a href="#" class="zocial instagram">Sign in with Instagram</a> | |||
| <a href="#" class="zocial steam">Sign in with Steam</a> | |||
| <a href="#" class="zocial vk">Sign in with VKontakte</a> | |||
| <a href="#" class="zocial appnet">Sign in with App.net</a> | |||
| <a href="#" class="zocial drupal">Built with Drupal</a> | |||
| <a href="#" class="zocial statusnet">Share with Status.net/Indenti.ca</a> | |||
| <a href="#" class="zocial pocket">Save for later</a> | |||
| <a href="#" class="zocial acrobat">Download Adobe Acrobat</a> | |||
| <a href="#" class="zocial bitbucket">Fork from Bitbucket</a> | |||
| <a href="#" class="zocial buffer">Buffer</a> | |||
| <a href="#" class="zocial lego">Make me out of Lego</a> | |||
| <a href="#" class="zocial logmein">Log in</a> | |||
| <a href="#" class="zocial ycombinator">Hacker News</a> | |||
| <a href="#" class="zocial stackoverflow">Sign in with Stackoverflow</a> | |||
| <a href="#" class="zocial lkdto">Lkd.to</a> | |||
| <a href="#" class="zocial persona">Sign in with Persona</a> | |||
| <a href="#" class="zocial messenger">Start chat on Messenger</a> | |||
| <a href="#" class="zocial stripe">Sign in with Stripe</a> | |||
| <a href="#" class="zocial dwolla">Sign in with Dwolla</a> | |||
| <a href="#" class="zocial joinme">Sign in with join.me</a> | |||
| <a href="#" class="zocial betaseries">Voir mon profil BetaSeries</a> | |||
| <a href="#" class="zocial deviantart">Follow me on DeviantArt</a> | |||
| <a href="#" class="zocial www">https://www.w3.org</a> | |||
| <a href="#" class="zocial askfm">Follow me on ASKfm</a> | |||
| <a href="#" class="zocial discordapp">Call me on Discord</a> | |||
| <a href="#" class="zocial call">Call a phone</a> | |||
| <a href="#" class="zocial email">Send a message</a> | |||
| <a href="#" class="zocial cal">Add to calendar</a> | |||
| <a href="#" class="zocial cart">Add to cart</a> | |||
| <a href="#" class="zocial print">Print this page</a> | |||
| <a href="#" class="zocial primary" title="A primary button for general purposes to keep consistency with Zocial">Primary action</a> | |||
| <a href="#" class="zocial secondary" title="A secondary button for general purposes to keep consistency with Zocial">Secondary action</a> | |||
| <h2 id="icons">Icon versions</h2> | |||
| <a href="#" class="zocial icon facebook">Sign in with Facebook</a> | |||
| <a href="#" class="zocial icon googleplus">Sign in with Google+</a> | |||
| <a href="#" class="zocial icon twitter">Sign in with Twitter</a> | |||
| <a href="#" class="zocial icon google">Sign in with Google</a> | |||
| <a href="#" class="zocial icon linkedin">Sign in with LinkedIn</a> | |||
| <a href="#" class="zocial icon paypal">Pay with Paypal</a> | |||
| <a href="#" class="zocial icon amazon">Sign in with Amazon</a> | |||
| <a href="#" class="zocial icon dropbox">Sync with Dropbox</a> | |||
| <a href="#" class="zocial icon evernote">Clip to Evernote</a> | |||
| <a href="#" class="zocial icon skype">Call me on Skype</a> | |||
| <a href="#" class="zocial icon guest">Sign in as guest</a> | |||
| <a href="#" class="zocial icon spotify">Play on Spotify</a> | |||
| <a href="#" class="zocial icon lastfm">Sign in with Last.fm</a> | |||
| <a href="#" class="zocial icon songkick">Sign in with Songkick</a> | |||
| <a href="#" class="zocial icon forrst">Follow me on Forrst</a> | |||
| <a href="#" class="zocial icon dribbble">Sign in with Dribbble</a> | |||
| <a href="#" class="zocial icon cloudapp">Sign in to CloudApp</a> | |||
| <a href="#" class="zocial icon github">Fork me on Github</a> | |||
| <a href="#" class="zocial icon gitlab">Fork me on GitLab</a> | |||
| <a href="#" class="zocial pinterest icon">Follow me on Pinterest</a> | |||
| <a href="#" class="zocial quora icon">Follow me on Quora</a> | |||
| <a href="#" class="zocial pinboard icon">Bookmark with Pinboard</a> | |||
| <a href="#" class="zocial lanyrd icon">Attend on Lanyrd</a> | |||
| <a href="#" class="zocial icon itunes">Download on iTunes</a> | |||
| <a href="#" class="zocial icon android">Download on Android</a> | |||
| <a href="#" class="zocial icon disqus">Sign in with Disqus</a> | |||
| <a href="#" class="zocial icon yahoo">Sign in with Yahoo</a> | |||
| <a href="#" class="zocial icon vimeo">Upload to Vimeo</a> | |||
| <a href="#" class="zocial icon chrome">Add to Chrome</a> | |||
| <a href="#" class="zocial icon ie">Get a new browser</a> | |||
| <a href="#" class="zocial icon html5">Made from HTML5</a> | |||
| <a href="#" class="zocial icon instapaper">Read It Later</a> | |||
| <a href="#" class="zocial icon scribd">Read more on Scribd</a> | |||
| <a href="#" class="zocial icon wikipedia">View on Wikipedia</a> | |||
| <a href="#" class="zocial icon flattr">Tip with Flattr</a> | |||
| <a href="#" class="zocial icon tumblr">Follow me on Tumblr</a> | |||
| <a href="#" class="zocial icon posterous">Subscribe to my Posterous</a> | |||
| <a href="#" class="zocial icon gowalla">Check in with Gowalla</a> | |||
| <a href="#" class="zocial icon foursquare">Check in with foursquare</a> | |||
| <a href="#" class="zocial icon yelp">Write a review on Yelp</a> | |||
| <a href="#" class="zocial icon soundcloud">Follow me on Soundcloud</a> | |||
| <a href="#" class="zocial icon smashing">Read on Smashing Magazine</a> | |||
| <a href="#" class="zocial icon wordpress">Sign in with WordPress</a> | |||
| <a href="#" class="zocial icon intensedebate">Sign in with IntenseDebate</a> | |||
| <a href="#" class="zocial icon openid">Sign in with OpenID</a> | |||
| <a href="#" class="zocial icon gmail">Sign in with Gmail</a> | |||
| <a href="#" class="zocial icon eventbrite">Sign in with Eventbrite</a> | |||
| <a href="#" class="zocial icon eventasaurus">Sign in with Eventasaurus</a> | |||
| <a href="#" class="zocial icon meetup">Sign in with Meetup.com</a> | |||
| <a href="#" class="zocial icon aol">Sign in with AIM</a> | |||
| <a href="#" class="zocial icon plancast">Follow me on Plancast</a> | |||
| <a href="#" class="zocial icon youtube">Subscribe on YouTube</a> | |||
| <a href="#" class="zocial icon appstore">Available on the Mac App Store</a> | |||
| <a href="#" class="zocial icon creativecommons">View Creative Commons Licence</a> | |||
| <a href="#" class="zocial icon rss">Subscribe to RSS</a> | |||
| <a href="#" class="zocial weibo icon">Follow me on Weibo</a> | |||
| <a href="#" class="zocial plurk icon">Follow me on Plurk</a> | |||
| <a href="#" class="zocial grooveshark icon">Follow me on Grooveshark</a> | |||
| <a href="#" class="zocial blogger icon">Post on Blogger</a> | |||
| <a href="#" class="zocial viadeo icon">Sign in with Viadeo</a> | |||
| <a href="#" class="zocial podcast icon">Subscribe to this Podcast</a> | |||
| <a href="#" class="zocial fivehundredpx icon">View Portfolio on 500px</a> | |||
| <a href="#" class="zocial bitcoin icon">Bitcoin accepted here</a> | |||
| <a href="#" class="zocial ninetyninedesigns icon">View Portfolio on 99Designs</a> | |||
| <a href="#" class="zocial stumbleupon icon">Stumble!</a> | |||
| <a href="#" class="zocial itunes icon">Download on iTunes</a> | |||
| <a href="#" class="zocial myspace icon">Find me on Myspace</a> | |||
| <a href="#" class="zocial windows icon">Sign in with Windows Live</a> | |||
| <a href="#" class="zocial eventful icon">Find Events with Eventful</a> | |||
| <a href="#" class="zocial klout icon">Influence with Klout</a> | |||
| <a href="#" class="zocial xing icon">Sign in with Xing</a> | |||
| <a href="#" class="zocial flickr icon">Upload to Flickr</a> | |||
| <a href="#" class="zocial delicious icon">Sign in with Del.icio.us</a> | |||
| <a href="#" class="zocial googleplay icon">Download from Google Play</a> | |||
| <a href="#" class="zocial opentable icon">Reserve with OpenTable</a> | |||
| <a href="#" class="zocial digg icon">Digg this</a> | |||
| <a href="#" class="zocial reddit icon">Share on Reddit</a> | |||
| <a href="#" class="zocial angellist icon">Fund us on AngelList</a> | |||
| <a href="#" class="zocial instagram icon">Sign in with Instagram</a> | |||
| <a href="#" class="zocial steam icon">Sign in with Steam</a> | |||
| <a href="#" class="zocial vk icon">Sign in with VKontakte</a> | |||
| <a href="#" class="zocial appnet icon">Sign in with App.net</a> | |||
| <a href="#" class="zocial stripe icon">Sign in with Stripe</a> | |||
| <a href="#" class="zocial dwolla icon">Sign in with Dwolla</a> | |||
| <a href="#" class="zocial drupal icon">Built with Drupal</a> | |||
| <a href="#" class="zocial statusnet icon">Share with Status.net/Indenti.ca</a> | |||
| <a href="#" class="zocial pocket icon">Save for later</a> | |||
| <a href="#" class="zocial acrobat icon">Download Adobe Acrobat</a> | |||
| <a href="#" class="zocial bitbucket icon">Fork from Bitbucket</a> | |||
| <a href="#" class="zocial buffer icon">Buffer</a> | |||
| <a href="#" class="zocial lego icon">Make me out of Lego</a> | |||
| <a href="#" class="zocial logmein icon">Log in</a> | |||
| <a href="#" class="zocial ycombinator icon">Hacker News</a> | |||
| <a href="#" class="zocial stackoverflow icon">Sign in with Stackoverflow</a> | |||
| <a href="#" class="zocial lkdto icon">Lkd.to</a> | |||
| <a href="#" class="zocial persona icon">Sign in with Persona</a> | |||
| <a href="#" class="zocial joinme icon">Sign in with join.me</a> | |||
| <a href="#" class="zocial twitch icon">Sign in with Twitch</a> | |||
| <a href="#" class="zocial houzz icon">Sign in with Houzz</a> | |||
| <a href="#" class="zocial slack icon">Sign in with Slack</a> | |||
| <a href="#" class="zocial pandora icon">Sign in with Pandora</a> | |||
| <a href="#" class="zocial betaseries icon">Voir mon profil BetaSeries</a> | |||
| <a href="#" class="zocial deviantart icon">Follow me on DeviantArt</a> | |||
| <a href="#" class="zocial www icon">https://www.w3.org/</a> | |||
| <a href="#" class="zocial askfm icon">Follow me on ASKfm</a> | |||
| <a href="#" class="zocial discordapp icon">Call me on Discord</a> | |||
| <a href="#" class="zocial call icon">Call a phone</a> | |||
| <a href="#" class="zocial email icon">Send a message</a> | |||
| <a href="#" class="zocial cal icon">Add to calendar</a> | |||
| <a href="#" class="zocial print icon">Print this page</a> | |||
| <a href="#" class="zocial cart icon">Add to cart</a> | |||
| </div> | |||
| <p>Under MIT License. <a href=-"https://github.com/smcllns/css-social-buttons">Zocial on Github.</a></p> | |||
| <script type="text/javascript"> | |||
| var sizeInput = document.getElementById('font-size-range'); | |||
| var sizeDisplay = document.getElementById('font-size-display'); | |||
| var labelInput = document.getElementById('label-input'); | |||
| var toggleRadios = document.querySelectorAll('[class="toggle-type"]'); | |||
| var showcaseButton = document.getElementById('showcase-button'); | |||
| var defaultLabel = "Sign in with Facebook"; | |||
| labelInput.addEventListener('keyup', function(e) { | |||
| var currentLabel = this.value; | |||
| var newLabel = currentLabel.length > 0 ? currentLabel : defaultLabel; | |||
| showcaseButton.textContent = newLabel; | |||
| }) | |||
| sizeInput.addEventListener('change', function(e) { | |||
| var currentSize = this.value; | |||
| var newSize = currentSize +"px" | |||
| sizeDisplay.textContent = newSize; | |||
| showcaseButton.style.fontSize = newSize; | |||
| }) | |||
| for (var i=0; i<toggleRadios.length; i++) { | |||
| toggleRadios[i].addEventListener('change', function() { | |||
| showcaseButton.classList.toggle('icon'); | |||
| }) | |||
| } | |||
| </script> | |||
| </body> | |||
| </html> | |||