diff --git a/index.html b/index.html deleted file mode 120000 index 27e4197..0000000 --- a/index.html +++ /dev/null @@ -1 +0,0 @@ -sample.html \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..8388105 --- /dev/null +++ b/index.html @@ -0,0 +1,139 @@ + + + + Zocial | CSS3 Button Set + + + + + + + + +

Good buttons
make good neighbours.

+ +
+ + +
+ Forty-two CSS buttons and icons lovingly made for your home. +
+ + +
+
+ Get 'em on Github +

Looking for the SASS framework? Get it here!

+
+
+ $24.00 +

42 CSS3 font-face
vector icon buttons

+

For the obsessive compulsive,
precocious designers of the web.

+
+
+ +
+
+

Necessity

+

Utilitarian minds amongst you will wonder if such elegant buttons may improve conversions amongst your users. I conservatively assume that these finely crafted treasures will do no such thing—but rather, that they will remove the fickle distractions of inconsistent buttons and clear the way for your creative hands.

+
+
+

Reliability

+

Pessimists will argue that the time has not yet arrived to embrace vector methods where image sprites once reigned superior. Perhaps it will be of some comfort to know that the first version of these buttons are used by WordPress and can be found in over 200,000 new blog posts every morning.

+
+
+

Value

+

Entrepreneurs will indulge in the principle that all good work will be rewarded and before finishing this sentence, will have already calculated the cost-benefit of purchasing these items. For those more cash-strapped, you will find the first version of these buttons deep inside the crypts of github.

+
+
+ +
+ +
+ +
+ +
+ + +
+ + +
+
+ + +
+

Font size: 16px

+

Button text

+

Type

+
+
+ +

TRY IT YOURSELF

+

Editable button text

+

Editable size

+

One version for all resolutions

+

100% vector icon with @font-face

+

Cross-browser support

+

Gracefully degrades (IE6, IE7)

+

Button & Icon styles

+ +
+ +
+
+

Examples

+

These buttons require no extra markup and are designed with semantics in mind. Show examples.

+

Create a Facebook button

+

On the parent element, add a class of "zocial" and a class for the button you need, in this case "facebook". Be sure to wrap your button text in a span tag as shown:

+ + <button class="zocial facebook">Sign in with Facebook</button> + +

Create a LinkedIn button

+

The parent element can be any element, this time we're using <a> to create a LinkedIn button:

+ + <a class="zocial linkedin">Sign in with LinkedIn</a> + +

Resize the button

+

Change the size of the button by adjusting the font-size of the parent element. The default font-size is 16px.

+ + <button class="zocial skype" style="font-size: 22px">Skype Me</button> + +

Show the icon version of the button

+

Simply add a class of "icon".

+ + <a class="zocial twitter icon">Follow me on Twitter</a> + +
+
+ + +
+ + + + + + + + + diff --git a/site/bebasneue-webfont.eot b/site/bebasneue-webfont.eot new file mode 100644 index 0000000..eefc29f Binary files /dev/null and b/site/bebasneue-webfont.eot differ diff --git a/site/bebasneue-webfont.svg b/site/bebasneue-webfont.svg new file mode 100644 index 0000000..c6c7d6c --- /dev/null +++ b/site/bebasneue-webfont.svg @@ -0,0 +1,146 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c 2010 by Ryoichi Tsunekawa All rights reserved +Designer : Ryoichi Tsunekawa +Foundry : Ryoichi Tsunekawa + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/bebasneue-webfont.ttf b/site/bebasneue-webfont.ttf new file mode 100644 index 0000000..9b9eefc Binary files /dev/null and b/site/bebasneue-webfont.ttf differ diff --git a/site/bebasneue-webfont.woff b/site/bebasneue-webfont.woff new file mode 100644 index 0000000..89423e1 Binary files /dev/null and b/site/bebasneue-webfont.woff differ diff --git a/site/button-sample.png b/site/button-sample.png new file mode 100644 index 0000000..5894327 Binary files /dev/null and b/site/button-sample.png differ diff --git a/site/core.css b/site/core.css new file mode 100644 index 0000000..fb7bbec --- /dev/null +++ b/site/core.css @@ -0,0 +1,329 @@ +@font-face { + font-family: 'Bebas Neue'; + src: url('bebasneue-webfont.eot'); + src: url('bebasneue-webfont.eot?#iefix') format('embedded-opentype'), + url('bebasneue-webfont.woff') format('woff'), + url('bebasneue-webfont.ttf') format('truetype'), + url('bebasneue-webfont.svg#BebasNeueRegular') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: "pictos"; + src: + url("pictos-web.eot?") format("eot"), + url("pictos-web.woff") format("woff"), + url("pictos-web.ttf") format("truetype"), + url("pictos-web.svg#webfontIyfZbseF") format("svg"); + font-weight: normal; + font-style: normal; +} +body { + background: #f0ecdf url('white-radial-gradient.png') no-repeat center 50px; + color: #312C2A; + font-family: Georgia, serif; + margin: 4em auto; + text-shadow: 0 1px 0 rgba(255,255,255,0.75); + width: 800px; +} + +h1 { + font-family: "Baskerville Old Face", Georgia, serif; + line-height: 1.5em; + font-weight: normal; + text-align: center; + font-size: 2em; + padding: 0; + margin: 0; +} +h2, #button-sample:before { + text-transform: uppercase; + font-family: "Bebas Neue", "Helvetica Neue", serif; + font-size: 20px; + font-weight: normal; +} +h1, h2, p, #purchase-area > div > span { + opacity: 0.9; +} +a { + color: #312C2A; + color: rgba(49,44,42,0.75); + text-decoration: none; +} +a:hover { + border-bottom: 1px solid rgba(49,44,42,0.5); +} +.dingbat { + background: url(dingbat.png) no-repeat center center; + width: 63px; + height: 29px; + margin: 0 auto; + padding: 64px 0; + opacity: 0.75; + clear: both; +} + + +#button-sample { + margin: 0 auto 64px; + width: 804px; + height: 314px; + background: url(button-sample.png) no-repeat center top; + text-align: center; + position: relative; + cursor: pointer; +} +#button-sample:hover:before { + content: "view demo"; + display: block; + background: #fff; + background: rgba(255,255,255,0.75); + width: 128px; + height: 128px; + line-height: 128px; + white-space: nowrap; + position: absolute; + left: 50%; + margin-left: -64px; + z-index: 100; + border-radius: 100px; + -moz-border-radius: 100px; + -webkit-border-radius: 100px; + top: 50%; + margin-top: -96px; +} +#button-sample > span { + text-align: center; + display: block; + width: 100%; + position: absolute; + bottom: 32px; + left: 0; + font-weight: normal; + font-size: 13px; + color: #777; + padding: 16px 0; +} +#button-sample > span:before { + content: "k "; + font-family: "pictos"; + color: #BA5B64; + font-size: 18px; +} +#purchase-area > a.zocial { + margin: 48px 0; + font-size: 20px; + display: inline-block; +} +#purchase-area > p.subtxt { + width: 45.5%; + padding: 0 10px; + margin: 10px 9% 0; + text-align: center; + font-size: 15px; +} +#purchase-area > p.subtxt > a { + line-height: 1.5; + padding-bottom: 2px; + border-bottom: 1px solid rgba(0,0,0,0.25); +} +#purchase-area > p.subtxt > a:hover { + color: rgba(0,0,0,0.9); +} +#purchase-area div.cta { + float: left; + width: 60%; + padding: 72px 32px; + text-align: center; +} +#purchase-area div.aside { + margin-left: 69%; + width: 30%; + margin-top: -32px; +} +#purchase-area div.aside > span { + font-size: 48px; + padding: 16px 0; + margin: 0 0 2px 0; + border-bottom: 4px solid rgba(0,0,0,0.75); + position: relative; + display: block; + font-weight: bold; + text-decoration: line-through; +} +#purchase-area div.aside p { + padding: 16px 0; + margin: 0; +} +#purchase-area div.aside h2 { + padding: 16px 0; + margin: 0 0 2px 0; + border-bottom: 4px solid rgba(0,0,0,0.75); + border-top: 1px solid rgba(0,0,0,0.75); +} +#purchase-area div.aside p { + font-size: 12px; +} +#labels { + margin-top: 48px; +} +#labels > article { + width: 30%; + float: left; + margin-right: 4.5%; +} +#labels > article:nth-of-type(3) { + margin-right: 0; +} +#labels p:first-letter { + float: left; + font-size: 56px; + line-height: 56px; + padding: 0 10px 0 0; + display: block; +} +#labels p, +#demo-area > p { + font-size: 12px; +} +#demo-area { + padding: 0; +} +#demo-area > p:before { + font-family: "pictos"; + content: "3 "; +} +#demo-area > h2 { + border-bottom: 4px solid rgba(0,0,0,0.75); + padding: 4px 0; + margin-bottom: 2px; +} +#demo-area > p:nth-of-type(1) { + border-top: 1px solid rgba(0,0,0,0.75); + padding-top: 1em; + margin-top: 2px; +} +#demo-area > h2, +#demo-area > p { + margin-left: 69%; + width: 30%; +} +#demo { + float: left; + width: 64.5%; + padding-top: 64px; + height: 154px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + position: relative; + text-align: center; +} +#demo form { + position: absolute; + bottom: 0; + width: 96%; + margin: 0; + background: rgba(0,0,0,0.1); + -webkit-border-radius: 2px 2px 4px 4px; + -moz-border-radius: 2px 2px 4px 4px; + border-radius: 2px 2px 4px 4px; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 0px rgba(0,0,0,0.25); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 0px rgba(0,0,0,0.25); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 0px rgba(0,0,0,0.25); + border-top: 1px solid rgba(0,0,0,0); + text-align: left; + padding: 4px 2%; +} +#demo form > p { + font-size: 12px; + font-weight: normal; + float: left; + text-align: center; + margin: 0; + width: 30%; + padding: 8px 1.5%; +} +#demo form > input:nth-of-type(1), +#demo form > input:nth-of-type(2) { + width: 29%; + display: inline-block; + margin: 0 1.5%; + font-size: 11px; + padding: 1% 0.5%; + border: 0; + border-radius: 2px; +} +#demo form > input:nth-of-type(1) { + width: 26%; + margin: 0 3%; +} +#demo form > input:nth-of-type(2) { + width: 31%; + -webkit-box-shadow: inset 0 1px 0px rgba(0,0,0,0.35); + -moz-box-shadow: inset 0 1px 0px rgba(0,0,0,0.35); + box-shadow: inset 0 1px 0px rgba(0,0,0,0.35); + border-bottom: 1px solid rgba(255,255,255,0.35); +} +#demo form > div { + text-align: center; + display: inline-block; + font-size: 12px; + width: 13%; +} +#demo form > div:nth-of-type(1) { + margin-left: 3%; +} +#howto { + padding: 64px 0 0; +} +#howto.compact code, +#howto.compact p:nth-of-type(n+2), +#howto.compact h2:nth-of-type(n+2) { + display: none; +} +#howto p { + font-size: 12px; +} +#howto code { + background: rgba(0,0,0,0.1); + line-height: 1.5em; + padding: 1em; + margin: 2em 0 ; + display: block; +} +body > footer p { + text-align: center; + font-size: 12px; +} +#button-lightbox { + position: relative; + background: rgba(255,255,255,0.95); + z-index: 1000; + text-align: center; + padding: 32px 0; + width: 760px; + margin: 0 auto; + -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.75); + -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.75); + box-shadow: 0 1px 2px rgba(0,0,0,0.75); + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + margin-bottom: 4em; +} +#button-lightbox p { + font-size: 13px; + padding: 32px 0; +} +#button-lightbox > img { +} +#button-lightbox h2 { + padding: 64px 0 0; +} +.hidden { + display: none; +} +section, article, aside, header, footer { + display: block; +} diff --git a/site/dingbat.png b/site/dingbat.png new file mode 100644 index 0000000..2143fcf Binary files /dev/null and b/site/dingbat.png differ diff --git a/site/html5slider.js b/site/html5slider.js new file mode 100644 index 0000000..f35a73e --- /dev/null +++ b/site/html5slider.js @@ -0,0 +1,265 @@ +/* +html5slider - a JS implementation of for Firefox 4 and up + +Copyright (c) 2010-2011 Frank Yan, + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. +*/ + +(function() { + +// test for native support +var test = document.createElement('input'); +try { + test.type = 'range'; + if (test.type == 'range') + return; +} catch (e) { + return; +} + +// test for required property support +if (!document.mozSetImageElement || !('MozAppearance' in test.style)) + return; + +var scale; +var isMac = navigator.platform == 'MacIntel'; +var thumb = { + radius: isMac ? 9 : 6, + width: isMac ? 22 : 12, + height: isMac ? 16 : 20 +}; +var track = '-moz-linear-gradient(top, transparent ' + (isMac ? + '6px, #999 6px, #999 7px, #ccc 9px, #bbb 11px, #bbb 12px, transparent 12px' : + '9px, #999 9px, #bbb 10px, #fff 11px, transparent 11px') + + ', transparent)'; +var styles = { + 'min-width': thumb.width + 'px', + 'min-height': thumb.height + 'px', + 'max-height': thumb.height + 'px', + padding: 0, + border: 0, + 'border-radius': 0, + cursor: 'default', + 'text-indent': '-999999px' // -moz-user-select: none; breaks mouse capture +}; +var onChange = document.createEvent('HTMLEvents'); +onChange.initEvent('change', true, false); + +if (document.readyState == 'loading') + document.addEventListener('DOMContentLoaded', initialize, true); +else + initialize(); + +function initialize() { + // create initial sliders + Array.forEach(document.querySelectorAll('input[type=range]'), transform); + // create sliders on-the-fly + document.addEventListener('DOMNodeInserted', onNodeInserted, true); +} + +function onNodeInserted(e) { + check(e.target); + if (e.target.querySelectorAll) + Array.forEach(e.target.querySelectorAll('input'), check); +} + +function check(input, async) { + if (input.localName != 'input' || input.type == 'range'); + else if (input.getAttribute('type') == 'range') + transform(input); + else if (!async) + setTimeout(check, 0, input, true); +} + +function transform(slider) { + + var isValueSet, areAttrsSet, isChanged, isClick, prevValue, rawValue, prevX; + var min, max, step, range, value = slider.value; + + // lazily create shared slider affordance + if (!scale) { + scale = document.body.appendChild(document.createElement('hr')); + style(scale, { + '-moz-appearance': isMac ? 'scale-horizontal' : 'scalethumb-horizontal', + display: 'block', + visibility: 'visible', + opacity: 1, + position: 'fixed', + top: '-999999px' + }); + document.mozSetImageElement('__sliderthumb__', scale); + } + + // reimplement value and type properties + slider.__defineGetter__('value', function() { + return '' + value; + }); + slider.__defineSetter__('value', function(val) { + value = '' + val; + isValueSet = true; + draw(); + }); + slider.__defineGetter__('type', function() { + return 'range'; + }); + + // sync properties with attributes + ['min', 'max', 'step'].forEach(function(prop) { + if (slider.hasAttribute(prop)) + areAttrsSet = true; + slider.__defineGetter__(prop, function() { + return this.hasAttribute(prop) ? this.getAttribute(prop) : ''; + }); + slider.__defineSetter__(prop, function(val) { + val === null ? this.removeAttribute(prop) : this.setAttribute(prop, val); + }); + }); + + // initialize slider + slider.readOnly = true; + style(slider, styles); + update(); + + slider.addEventListener('DOMAttrModified', function(e) { + // note that value attribute only sets initial value + if (e.attrName == 'value' && !isValueSet) { + value = e.newValue; + draw(); + } + else if (~['min', 'max', 'step'].indexOf(e.attrName)) { + update(); + areAttrsSet = true; + } + }, true); + + slider.addEventListener('mousedown', onDragStart, true); + slider.addEventListener('keydown', onKeyDown, true); + slider.addEventListener('focus', onFocus, true); + slider.addEventListener('blur', onBlur, true); + + function onDragStart(e) { + isClick = true; + setTimeout(function() { isClick = false; }, 0); + if (e.button || !range) + return; + var width = parseFloat(getComputedStyle(this, 0).width); + var multiplier = (width - thumb.width) / range; + if (!multiplier) + return; + // distance between click and center of thumb + var dev = e.clientX - this.getBoundingClientRect().left - thumb.width / 2 - + (value - min) * multiplier; + // if click was not on thumb, move thumb to click location + if (Math.abs(dev) > thumb.radius) { + isChanged = true; + this.value -= -dev / multiplier; + } + rawValue = value; + prevX = e.clientX; + this.addEventListener('mousemove', onDrag, true); + this.addEventListener('mouseup', onDragEnd, true); + } + + function onDrag(e) { + var width = parseFloat(getComputedStyle(this, 0).width); + var multiplier = (width - thumb.width) / range; + if (!multiplier) + return; + rawValue += (e.clientX - prevX) / multiplier; + prevX = e.clientX; + isChanged = true; + this.value = rawValue; + } + + function onDragEnd() { + this.removeEventListener('mousemove', onDrag, true); + this.removeEventListener('mouseup', onDragEnd, true); + } + + function onKeyDown(e) { + if (e.keyCode > 36 && e.keyCode < 41) { // 37-40: left, up, right, down + onFocus.call(this); + isChanged = true; + this.value = value + (e.keyCode == 38 || e.keyCode == 39 ? step : -step); + } + } + + function onFocus() { + if (!isClick) + this.style.boxShadow = !isMac ? '0 0 0 2px #fb0' : + '0 0 2px 1px -moz-mac-focusring, inset 0 0 1px -moz-mac-focusring'; + } + + function onBlur() { + this.style.boxShadow = ''; + } + + // determines whether value is valid number in attribute form + function isAttrNum(value) { + return !isNaN(value) && +value == parseFloat(value); + } + + // validates min, max, and step attributes and redraws + function update() { + min = isAttrNum(slider.min) ? +slider.min : 0; + max = isAttrNum(slider.max) ? +slider.max : 100; + if (max < min) + max = min > 100 ? min : 100; + step = isAttrNum(slider.step) && slider.step > 0 ? +slider.step : 1; + range = max - min; + draw(true); + } + + // recalculates value property + function calc() { + if (!isValueSet && !areAttrsSet) + value = slider.getAttribute('value'); + if (!isAttrNum(value)) + value = (min + max) / 2;; + // snap to step intervals (WebKit sometimes does not - bug?) + value = Math.round((value - min) / step) * step + min; + if (value < min) + value = min; + else if (value > max) + value = min + ~~(range / step) * step; + } + + // renders slider using CSS background ;) + function draw(attrsModified) { + calc(); + if (isChanged && value != prevValue) + slider.dispatchEvent(onChange); + isChanged = false; + if (!attrsModified && value == prevValue) + return; + prevValue = value; + var position = range ? (value - min) / range * 100 : 0; + var bg = '-moz-element(#__sliderthumb__) ' + position + '% no-repeat, '; + style(slider, { background: bg + track }); + } + +} + +function style(element, styles) { + for (var prop in styles) + element.style.setProperty(prop, styles[prop], 'important'); +} + +})(); diff --git a/site/pictos-web.eot b/site/pictos-web.eot new file mode 100644 index 0000000..f34d23f Binary files /dev/null and b/site/pictos-web.eot differ diff --git a/site/pictos-web.svg b/site/pictos-web.svg new file mode 100644 index 0000000..2d16831 --- /dev/null +++ b/site/pictos-web.svg @@ -0,0 +1,114 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Designer : Drew Wilson +Foundry : Drew Wilson +Foundry URL : httppictosdrewwilsoncom + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/pictos-web.ttf b/site/pictos-web.ttf new file mode 100644 index 0000000..3ad12d5 Binary files /dev/null and b/site/pictos-web.ttf differ diff --git a/site/pictos-web.woff b/site/pictos-web.woff new file mode 100644 index 0000000..90e5362 Binary files /dev/null and b/site/pictos-web.woff differ diff --git a/site/size-change.js b/site/size-change.js new file mode 100644 index 0000000..ef80880 --- /dev/null +++ b/site/size-change.js @@ -0,0 +1,46 @@ +(function($) { + $(function() { + var demo = $('#demo'); + var sizeInput = demo.find('input[type="range"]'); + var textInput = demo.find('input[type="text"]'); + var iconToggle = demo.find('input[type="radio"]'); + + sizeInput.change(function() { + var val = $(this).val() + "px"; + demo.find('.zocial').css('font-size', val); + demo.find('#font-size-display').text(val); + }) + textInput.keyup(function() { + var newlabel = $(this).val(); + demo.find('.zocial').text(newlabel); + }) + textInput.blur(function() { + if ($(this).val().length<1) demo.find('.zocial').text("Sign in with Google+"); + }) + iconToggle.click(function() { + if ($(this).attr('id') == "select-icon") demo.find('.zocial').addClass('icon'); + else demo.find('.zocial').removeClass('icon'); + }) + + $(document).ready(function() { + $('#button-lightbox a').click(function() { + _gaq.push(['_trackPageview', '/hide/button_preview']); + }) + }) + $('#button-sample').click(function() { + _gaq.push(['_trackPageview', '/view/button_preview']); + }) + $('#show-examples').click(function() { + _gaq.push(['_trackPageview', '/view/code_example']); + $('#howto').removeClass('compact'); + $(this).remove(); + return false; + }) + demo.click(function() { + _gaq.push(['_trackPageview', '/view/demo']); + }) + $('#purchase-area a').click(function() { + _gaq.push(['_trackPageview', '/click/' + $(this).attr('id')]); + }); + }) +})(jQuery) \ No newline at end of file diff --git a/site/white-radial-gradient.png b/site/white-radial-gradient.png new file mode 100644 index 0000000..1f77bdb Binary files /dev/null and b/site/white-radial-gradient.png differ