├── img └── rated.png ├── fonts ├── icomoon │ ├── icomoon.eot │ ├── icomoon.ttf │ ├── icomoon.woff │ └── icomoon.svg ├── blokk │ ├── BLOKKRegular.eot │ ├── BLOKKRegular.ttf │ ├── BLOKKRegular.woff │ └── BLOKKRegular.svg └── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.ttf │ ├── codropsicons.woff │ ├── license.txt │ └── codropsicons.svg ├── README.md ├── bower.json ├── css ├── normalize.css ├── demo.css ├── component.css └── content.css ├── js ├── classie.js ├── uiMorphingButton_inflow.js ├── uiMorphingButton_fixed.js └── modernizr.custom.js ├── index6.html ├── index4.html ├── index2.html ├── index.html ├── index7.html ├── index5.html └── index3.html /img/rated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonComponentMorph/HEAD/img/rated.png -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonComponentMorph/HEAD/fonts/icomoon/icomoon.eot -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonComponentMorph/HEAD/fonts/icomoon/icomoon.ttf -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonComponentMorph/HEAD/fonts/icomoon/icomoon.woff -------------------------------------------------------------------------------- /fonts/blokk/BLOKKRegular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonComponentMorph/HEAD/fonts/blokk/BLOKKRegular.eot -------------------------------------------------------------------------------- /fonts/blokk/BLOKKRegular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonComponentMorph/HEAD/fonts/blokk/BLOKKRegular.ttf -------------------------------------------------------------------------------- /fonts/blokk/BLOKKRegular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonComponentMorph/HEAD/fonts/blokk/BLOKKRegular.woff -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonComponentMorph/HEAD/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonComponentMorph/HEAD/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonComponentMorph/HEAD/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Morphing Buttons Concept 2 | ========= 3 | 4 | Inspiration for revealing content by morphing the action element. 5 | 6 | [Article on Codrops](http://tympanus.net/codrops/?p=19004) 7 | 8 | [Demo](http://tympanus.net/Development/ButtonComponentMorph/) 9 | 10 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 11 | 12 | Read more here: [License](http://tympanus.net/codrops/licensing/) 13 | 14 | 15 | [© Codrops 2014](http://www.codrops.com) -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ButtonComponentMorph", 3 | "version": "0.0.0", 4 | "homepage": "https://github.com/codrops/ButtonComponentMorph", 5 | "authors": [ 6 | "Codrops " 7 | ], 8 | "description": "Morphing button", 9 | "main": [ 10 | "js/classie.js", 11 | "js/modernizr.custom.js", 12 | "js/uiMorphingButton_fixed.js", 13 | "css/component.css", 14 | "css/content.css", 15 | "css/normalize.css" 16 | ], 17 | "license": "MIT", 18 | "ignore": [ 19 | "**/.*", 20 | "*.html" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie - class helper functions 3 | * from bonzo https://github.com/ded/bonzo 4 | * 5 | * classie.has( elem, 'my-class' ) -> true/false 6 | * classie.add( elem, 'my-new-class' ) 7 | * classie.remove( elem, 'my-unwanted-class' ) 8 | * classie.toggle( elem, 'my-class' ) 9 | */ 10 | 11 | /*jshint browser: true, strict: true, undef: true */ 12 | /*global define: false */ 13 | 14 | ( function( window ) { 15 | 16 | 'use strict'; 17 | 18 | // class helper functions from bonzo https://github.com/ded/bonzo 19 | 20 | function classReg( className ) { 21 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 22 | } 23 | 24 | // classList support for class management 25 | // altho to be fair, the api sucks because it won't accept multiple classes at once 26 | var hasClass, addClass, removeClass; 27 | 28 | if ( 'classList' in document.documentElement ) { 29 | hasClass = function( elem, c ) { 30 | return elem.classList.contains( c ); 31 | }; 32 | addClass = function( elem, c ) { 33 | elem.classList.add( c ); 34 | }; 35 | removeClass = function( elem, c ) { 36 | elem.classList.remove( c ); 37 | }; 38 | } 39 | else { 40 | hasClass = function( elem, c ) { 41 | return classReg( c ).test( elem.className ); 42 | }; 43 | addClass = function( elem, c ) { 44 | if ( !hasClass( elem, c ) ) { 45 | elem.className = elem.className + ' ' + c; 46 | } 47 | }; 48 | removeClass = function( elem, c ) { 49 | elem.className = elem.className.replace( classReg( c ), ' ' ); 50 | }; 51 | } 52 | 53 | function toggleClass( elem, c ) { 54 | var fn = hasClass( elem, c ) ? removeClass : addClass; 55 | fn( elem, c ); 56 | } 57 | 58 | var classie = { 59 | // full names 60 | hasClass: hasClass, 61 | addClass: addClass, 62 | removeClass: removeClass, 63 | toggleClass: toggleClass, 64 | // short names 65 | has: hasClass, 66 | add: addClass, 67 | remove: removeClass, 68 | toggle: toggleClass 69 | }; 70 | 71 | // transport 72 | if ( typeof define === 'function' && define.amd ) { 73 | // AMD 74 | define( classie ); 75 | } else { 76 | // browser global 77 | window.classie = classie; 78 | } 79 | 80 | })( window ); 81 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /js/uiMorphingButton_inflow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * uiMorphingButton_inflow.js v1.0.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2014, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;( function( window ) { 12 | 13 | 'use strict'; 14 | 15 | var transEndEventNames = { 16 | 'WebkitTransition': 'webkitTransitionEnd', 17 | 'MozTransition': 'transitionend', 18 | 'OTransition': 'oTransitionEnd', 19 | 'msTransition': 'MSTransitionEnd', 20 | 'transition': 'transitionend' 21 | }, 22 | transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], 23 | support = { transitions : Modernizr.csstransitions }; 24 | 25 | function extend( a, b ) { 26 | for( var key in b ) { 27 | if( b.hasOwnProperty( key ) ) { 28 | a[key] = b[key]; 29 | } 30 | } 31 | return a; 32 | } 33 | 34 | function UIMorphingButton( el, options ) { 35 | this.el = el; 36 | this.options = extend( {}, this.options ); 37 | extend( this.options, options ); 38 | this._init(); 39 | } 40 | 41 | UIMorphingButton.prototype.options = { 42 | closeEl : '', 43 | onBeforeOpen : function() { return false; }, 44 | onAfterOpen : function() { return false; }, 45 | onBeforeClose : function() { return false; }, 46 | onAfterClose : function() { return false; } 47 | } 48 | 49 | UIMorphingButton.prototype._init = function() { 50 | // save element height 51 | this.elH = this.el.offsetHeight; 52 | // the button 53 | this.button = this.el.querySelector( 'button' ); 54 | // state 55 | this.expanded = false; 56 | // content el 57 | this.contentEl = this.el.querySelector( '.morph-content' ); 58 | // init events 59 | this._initEvents(); 60 | } 61 | 62 | UIMorphingButton.prototype._initEvents = function() { 63 | var self = this; 64 | // open 65 | this.button.addEventListener( 'click', function() { self.toggle(); } ); 66 | // close 67 | if( this.options.closeEl !== '' ) { 68 | var closeEl = this.el.querySelector( this.options.closeEl ); 69 | if( closeEl ) { 70 | closeEl.addEventListener( 'click', function() { self.toggle(); } ); 71 | } 72 | } 73 | } 74 | 75 | UIMorphingButton.prototype.toggle = function() { 76 | if( this.isAnimating ) return false; 77 | 78 | // callback 79 | if( this.expanded ) { 80 | this.options.onBeforeClose(); 81 | } 82 | else { 83 | // add class active (solves z-index problem when more than one button is in the page) 84 | classie.addClass( this.el, 'active' ); 85 | this.options.onBeforeOpen(); 86 | } 87 | 88 | this.isAnimating = true; 89 | 90 | var self = this, 91 | onEndTransitionFn = function( ev ) { 92 | if( ev.target !== this ) return false; 93 | 94 | if( support.transitions ) { 95 | this.removeEventListener( transEndEventName, onEndTransitionFn ); 96 | } 97 | self.isAnimating = false; 98 | 99 | // callback 100 | if( self.expanded ) { 101 | // remove class active (after closing) 102 | classie.removeClass( self.el, 'active' ); 103 | self.options.onAfterClose(); 104 | } 105 | else { 106 | self.options.onAfterOpen(); 107 | } 108 | 109 | self.expanded = !self.expanded; 110 | }; 111 | 112 | if( support.transitions ) { 113 | this.el.addEventListener( transEndEventName, onEndTransitionFn ); 114 | } 115 | else { 116 | onEndTransitionFn(); 117 | } 118 | 119 | // add/remove class "open" to the button wraper 120 | this.el.style.height = this.expanded ? this.elH + 'px' : this.contentEl.offsetHeight + 'px'; 121 | 122 | if( this.expanded ) { 123 | classie.removeClass( this.el, 'open' ); 124 | } 125 | else { 126 | classie.addClass( this.el, 'open' ); 127 | } 128 | } 129 | 130 | // add to global namespace 131 | window.UIMorphingButton = UIMorphingButton; 132 | 133 | })( window ); -------------------------------------------------------------------------------- /index6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Morphing Buttons Concept | Demo 6 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | Previous Demo 23 | Back to the Codrops Article 24 |
25 |
26 |

Morphing Buttons Concept

27 |

Inspiration for revealing content by morphing the action element. Examples:

28 | 37 |
38 |
39 |
40 |
41 |
42 |

Tales of a Tiger

43 |

Turnip greens yarrow ricebean rutabaga endive cauliflower. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut broccoli and quinoa beets. Love cherries green heaven.

44 |
45 | 46 |
47 | 01:43 48 |
49 |
50 | Close the dialog 51 |
52 |
53 | Pause 54 | 00:00 55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |

If you enjoyed this demo you might also like:

65 | 66 | 67 |

Progress Button Styles

68 | 69 | 70 | 71 |

Sidebar Transitions

72 | 73 |
74 |
75 | 76 | 77 | 84 | 85 | -------------------------------------------------------------------------------- /index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Morphing Buttons Concept | Demo 4 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | Previous Demo 22 | Back to the Codrops Article 23 |
24 |
25 |

Morphing Buttons Concept

26 |

Inspiration for revealing content by morphing the action element. Examples:

27 | 36 |
37 |
38 |
39 |

Kohlrabi radish okra azuki bean corn fava bean mustard tigernut.

40 |
41 | 42 |
43 |
44 |
45 |

Subscribe to our Newsletter

46 |
47 |

We promise, we won't send you any spam. Just love.

48 |

49 |
50 |
51 |
52 |
53 |
54 |

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale.

55 |
56 |
57 |
58 |

If you enjoyed this demo you might also like:

59 | 60 | 61 |

Progress Button Styles

62 | 63 | 64 | 65 |

Sidebar Transitions

66 | 67 |
68 |
69 | 70 | 71 | 81 | 82 | -------------------------------------------------------------------------------- /js/uiMorphingButton_fixed.js: -------------------------------------------------------------------------------- 1 | /** 2 | * uiMorphingButton_fixed.js v1.0.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2014, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;( function( window ) { 12 | 13 | 'use strict'; 14 | 15 | var transEndEventNames = { 16 | 'WebkitTransition': 'webkitTransitionEnd', 17 | 'MozTransition': 'transitionend', 18 | 'OTransition': 'oTransitionEnd', 19 | 'msTransition': 'MSTransitionEnd', 20 | 'transition': 'transitionend' 21 | }, 22 | transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], 23 | support = { transitions : Modernizr.csstransitions }; 24 | 25 | function extend( a, b ) { 26 | for( var key in b ) { 27 | if( b.hasOwnProperty( key ) ) { 28 | a[key] = b[key]; 29 | } 30 | } 31 | return a; 32 | } 33 | 34 | function UIMorphingButton( el, options ) { 35 | this.el = el; 36 | this.options = extend( {}, this.options ); 37 | extend( this.options, options ); 38 | this._init(); 39 | } 40 | 41 | UIMorphingButton.prototype.options = { 42 | closeEl : '', 43 | onBeforeOpen : function() { return false; }, 44 | onAfterOpen : function() { return false; }, 45 | onBeforeClose : function() { return false; }, 46 | onAfterClose : function() { return false; } 47 | } 48 | 49 | UIMorphingButton.prototype._init = function() { 50 | // the button 51 | this.button = this.el.querySelector( 'button' ); 52 | // state 53 | this.expanded = false; 54 | // content el 55 | this.contentEl = this.el.querySelector( '.morph-content' ); 56 | // init events 57 | this._initEvents(); 58 | } 59 | 60 | UIMorphingButton.prototype._initEvents = function() { 61 | var self = this; 62 | // open 63 | this.button.addEventListener( 'click', function() { self.toggle(); } ); 64 | // close 65 | if( this.options.closeEl !== '' ) { 66 | var closeEl = this.el.querySelector( this.options.closeEl ); 67 | if( closeEl ) { 68 | closeEl.addEventListener( 'click', function() { self.toggle(); } ); 69 | } 70 | } 71 | document.onkeydown = function(evt) { 72 | evt = evt || window.event; 73 | if( self.options.closeEl !== '' ) { 74 | var closeEl = self.el.querySelector( self.options.closeEl ); 75 | if( closeEl && self.expanded) { 76 | self.toggle(); 77 | } 78 | } 79 | }; 80 | } 81 | 82 | UIMorphingButton.prototype.toggle = function() { 83 | if( this.isAnimating ) return false; 84 | 85 | // callback 86 | if( this.expanded ) { 87 | this.options.onBeforeClose(); 88 | } 89 | else { 90 | // add class active (solves z-index problem when more than one button is in the page) 91 | classie.addClass( this.el, 'active' ); 92 | this.options.onBeforeOpen(); 93 | } 94 | 95 | this.isAnimating = true; 96 | 97 | var self = this, 98 | onEndTransitionFn = function( ev ) { 99 | if( ev.target !== this ) return false; 100 | 101 | if( support.transitions ) { 102 | // open: first opacity then width/height/left/top 103 | // close: first width/height/left/top then opacity 104 | if( self.expanded && ev.propertyName !== 'opacity' || !self.expanded && ev.propertyName !== 'width' && ev.propertyName !== 'height' && ev.propertyName !== 'left' && ev.propertyName !== 'top' ) { 105 | return false; 106 | } 107 | this.removeEventListener( transEndEventName, onEndTransitionFn ); 108 | } 109 | self.isAnimating = false; 110 | 111 | // callback 112 | if( self.expanded ) { 113 | // remove class active (after closing) 114 | classie.removeClass( self.el, 'active' ); 115 | self.options.onAfterClose(); 116 | } 117 | else { 118 | self.options.onAfterOpen(); 119 | } 120 | 121 | self.expanded = !self.expanded; 122 | }; 123 | 124 | if( support.transitions ) { 125 | this.contentEl.addEventListener( transEndEventName, onEndTransitionFn ); 126 | } 127 | else { 128 | onEndTransitionFn(); 129 | } 130 | 131 | // set the left and top values of the contentEl (same like the button) 132 | var buttonPos = this.button.getBoundingClientRect(); 133 | // need to reset 134 | classie.addClass( this.contentEl, 'no-transition' ); 135 | this.contentEl.style.left = 'auto'; 136 | this.contentEl.style.top = 'auto'; 137 | 138 | // add/remove class "open" to the button wraper 139 | setTimeout( function() { 140 | self.contentEl.style.left = buttonPos.left + 'px'; 141 | self.contentEl.style.top = buttonPos.top + 'px'; 142 | 143 | if( self.expanded ) { 144 | classie.removeClass( self.contentEl, 'no-transition' ); 145 | classie.removeClass( self.el, 'open' ); 146 | } 147 | else { 148 | setTimeout( function() { 149 | classie.removeClass( self.contentEl, 'no-transition' ); 150 | classie.addClass( self.el, 'open' ); 151 | }, 25 ); 152 | } 153 | }, 25 ); 154 | } 155 | 156 | // add to global namespace 157 | window.UIMorphingButton = UIMorphingButton; 158 | 159 | })( window ); 160 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Morphing Buttons Concept | Demo 2 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | Previous Demo 23 | Back to the Codrops Article 24 |
25 |
26 |

Morphing Buttons Concept

27 |

Inspiration for revealing content by morphing the action element. Examples:

28 | 37 |
38 |
39 |

Click the button below to see it expanding into a modal dialog:

40 |
41 | 42 |
43 | 44 |
45 |
46 |
47 | Close the dialog 48 |

Terms & Conditions

49 |

Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut juccama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd.

50 |

51 |
52 |
53 |
54 |
55 | 56 | 57 |
58 |
59 |
60 |

If you enjoyed this demo you might also like:

61 | 62 | 63 |

Progress Button Styles

64 | 65 | 66 | 67 |

Sidebar Transitions

68 | 69 |
70 |
71 | 72 | 73 | 135 | 136 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Morphing Buttons Concept | Demo 1 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | Previous Demo 22 | Back to the Codrops Article 23 |
24 |
25 |

Morphing Buttons Concept

26 |

Inspiration for revealing content by morphing the action element. Examples:

27 | 36 |
37 |
38 |

Click one of the buttons below to see a modal dialog:

39 |
40 |

Pea horseradish azuki bean lettuce avocado asparagus okra.

41 |
42 | 43 |
44 |
45 |
46 | Close the dialog 47 |

Login

48 |
49 |

50 |

51 |

52 |
53 |
54 |
55 |
56 |
57 | or 58 |
59 | 60 |
61 |
62 |
63 | Close the dialog 64 |

Sign Up

65 |
66 |

67 |

68 |

69 |

70 |
71 |
72 |
73 |
74 |
75 |

Kohlrabi radish okra azuki bean corn fava bean mustard tigernut juccama green bean celtuce collard greens avocado quandong.

76 |
77 |
78 |
79 |

If you enjoyed this demo you might also like:

80 | 81 | 82 |

Progress Button Styles

83 | 84 | 85 | 86 |

Sidebar Transitions

87 | 88 |
89 |
90 | 91 | 92 | 157 | 158 | -------------------------------------------------------------------------------- /index7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Morphing Buttons Concept | Demo 7 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | Previous Demo 23 | Back to the Codrops Article 24 |
25 |
26 |

Morphing Buttons Concept

27 |

Inspiration for revealing content by morphing the action element. Examples:

28 | 37 |
38 |
39 |
40 |

Click the button to see it expanding into a fullscreen overlay:

41 |

Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut juccama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.

42 |
43 |
44 |
45 |

If you enjoyed this demo you might also like:

46 | 47 | 48 |

Progress Button Styles

49 | 50 | 51 | 52 |

Sidebar Transitions

53 | 54 |
55 |
56 |
57 | 58 |
59 |
60 |
61 | Close the overlay 62 |

Settings

63 | 74 |
75 |
76 |
77 |
78 | 79 | 80 | 149 | 150 | -------------------------------------------------------------------------------- /index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Morphing Buttons Concept | Demo 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | Previous Demo 22 | Back to the Codrops Article 23 |
24 |
25 |

Morphing Buttons Concept

26 |

Inspiration for revealing content by morphing the action element. Examples:

27 | 36 |
37 |
38 |
39 |

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.

40 |
41 |
42 | 43 |
44 |
45 |
46 | 47 | 48 | Share on Google+ 49 |
50 |
51 |
52 |
53 |
54 |

Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula.

55 |
56 |
57 |
58 |

If you enjoyed this demo you might also like:

59 | 60 | 61 |

Progress Button Styles

62 | 63 | 64 | 65 |

Sidebar Transitions

66 | 67 |
68 |
69 | 70 | 71 | 76 | 77 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Merriweather+Sans:800); 2 | 3 | @font-face { 4 | font-weight: normal; 5 | font-style: normal; 6 | font-family: 'codropsicons'; 7 | src:url('../fonts/codropsicons/codropsicons.eot'); 8 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 9 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 10 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 11 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 12 | } 13 | 14 | @font-face { 15 | font-family: 'Blokk'; 16 | src: url('../fonts/blokk/BLOKKRegular.eot'); 17 | src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'), 18 | url('../fonts/blokk/BLOKKRegular.woff') format('woff'), 19 | url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg'); 20 | font-weight: normal; 21 | font-style: normal; 22 | } 23 | 24 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 25 | .clearfix:before, .clearfix:after { content: ''; display: table; } 26 | .clearfix:after { clear: both; } 27 | 28 | body { 29 | position: relative; 30 | background: #5f545a; 31 | color: #faf1e0; 32 | font-size: 100%; 33 | line-height: 1.25; 34 | font-weight: 300; 35 | font-family: 'Lato', Arial, sans-serif; 36 | } 37 | 38 | .container { 39 | background: #67c2d4; 40 | } 41 | 42 | a, button { 43 | color: #553445; 44 | text-decoration: none; 45 | outline: none; 46 | } 47 | 48 | a:hover, a:focus { 49 | color: #e75854; 50 | } 51 | 52 | .codrops-header { 53 | margin: 0 auto; 54 | padding: 2em; 55 | text-align: center; 56 | } 57 | 58 | .codrops-header h1 { 59 | margin: 0; 60 | font-weight: 800; 61 | font-size: 3em; 62 | font-family: "Merriweather Sans", sans-serif; 63 | } 64 | 65 | .codrops-header p { 66 | padding: 0.35em 0 1.25em; 67 | margin: 0; 68 | font-size: 1.65em; 69 | opacity: 0.7; 70 | } 71 | 72 | /* Codrops Demos */ 73 | .codrops-demos a { 74 | font-family: "Merriweather Sans", sans-serif; 75 | text-transform: uppercase; 76 | display: inline-block; 77 | margin: 0 10px; 78 | } 79 | 80 | .codrops-demos a.current-demo { 81 | color: #e75854; 82 | } 83 | 84 | /* Top Navigation Style */ 85 | .codrops-top { 86 | width: 100%; 87 | text-transform: uppercase; 88 | font-weight: 700; 89 | font-size: 0.69em; 90 | line-height: 2.2; 91 | } 92 | 93 | .codrops-top a { 94 | display: inline-block; 95 | padding: 0 1em; 96 | text-decoration: none; 97 | letter-spacing: 1px; 98 | } 99 | 100 | .codrops-top span.right { 101 | float: right; 102 | } 103 | 104 | .codrops-top span.right a { 105 | display: block; 106 | float: left; 107 | } 108 | 109 | .codrops-icon:before { 110 | margin: 0 4px; 111 | text-transform: none; 112 | font-weight: normal; 113 | font-style: normal; 114 | font-variant: normal; 115 | font-family: 'codropsicons'; 116 | line-height: 1; 117 | speak: none; 118 | -webkit-font-smoothing: antialiased; 119 | } 120 | 121 | .codrops-icon-drop:before { 122 | content: "\e001"; 123 | } 124 | 125 | .codrops-icon-prev:before { 126 | content: "\e004"; 127 | } 128 | 129 | section { 130 | padding: 2em; 131 | text-align: justify; 132 | max-width: 800px; 133 | margin: 0 auto; 134 | clear: both; 135 | } 136 | 137 | section p { 138 | font-size: 1.5em; 139 | line-height: 1.75; 140 | } 141 | 142 | section > p:first-child { 143 | text-align: center; 144 | } 145 | 146 | section.related { 147 | text-align: center; 148 | } 149 | 150 | .related p { 151 | font-weight: 700; 152 | } 153 | 154 | .related > a { 155 | border: 2px solid #faf1e0; 156 | color: #faf1e0; 157 | display: inline-block; 158 | text-align: center; 159 | margin: 20px 10px; 160 | padding: 20px; 161 | -webkit-transition: color 0.3s, border-color 0.3s; 162 | transition: color 0.3s, border-color 0.3s; 163 | } 164 | 165 | .related a:hover { 166 | color: rgba(0,0,0,0.2); 167 | border-color: rgba(0,0,0,0.2); 168 | } 169 | 170 | .related a img { 171 | max-width: 100%; 172 | opacity: 0.8; 173 | -webkit-transition: opacity 0.3s; 174 | transition: opacity 0.3s; 175 | } 176 | 177 | .related a:hover img, 178 | .related a:active img { 179 | opacity: 1; 180 | } 181 | 182 | .related a h3 { 183 | margin: 0; 184 | padding: 0.5em 0 0.3em; 185 | max-width: 300px; 186 | text-transform: uppercase; 187 | letter-spacing: 1px; 188 | font-size: 1em; 189 | text-align: left; 190 | font-family: "Merriweather Sans", sans-serif; 191 | } 192 | 193 | /* Demo mockups */ 194 | .mockup-content { 195 | text-align: center; 196 | } 197 | 198 | .demo-4 .mockup-content { 199 | padding: 1em 0 3em; 200 | } 201 | 202 | .demo-5 .mockup-content { 203 | padding: 1em 0 6em; 204 | } 205 | 206 | .mockup-content > span { 207 | display: block; 208 | background: rgba(0,0,0,0.1); 209 | height: 50px; 210 | width: 100%; 211 | margin: 0 0 10px; 212 | clear: both; 213 | } 214 | 215 | .mockup-content > span:nth-child(2), 216 | .mockup-content > span:nth-child(3), 217 | .mockup-content > span:nth-last-child(2) { 218 | width: calc(50% - 5px); 219 | float: left; 220 | clear: none; 221 | height: 80px; 222 | } 223 | 224 | .mockup-content > span:nth-child(3), 225 | .mockup-content > span:nth-last-child(2) { 226 | float: right; 227 | } 228 | 229 | .mockup-content > span:nth-last-child(2) { 230 | width: calc(100% - 310px); 231 | } 232 | 233 | .no-js .mockup-content > span:nth-last-child(2) { 234 | width: 100%; 235 | } 236 | 237 | .mockup-content h2 { 238 | font-size: 2em; 239 | margin: 0; 240 | } 241 | 242 | .mockup-content > p { 243 | font-family: 'Blokk', sans-serif; 244 | font-size: 0.85em; 245 | text-align: center; 246 | opacity: 0.5; 247 | margin: 0; 248 | overflow: hidden; 249 | } 250 | 251 | .no-js .joiner { 252 | display: block; 253 | } 254 | 255 | .demo-5 .mockup-content > p { 256 | font-size: 1.4em; 257 | margin: 0; 258 | padding: 0.5em 0; 259 | text-align: justify; 260 | font-family: 'Lato', Arial, sans-serif; 261 | } 262 | 263 | .js .fixed-block { 264 | min-height: 300px; 265 | position: relative; 266 | } 267 | 268 | .mockup-left { 269 | float: left; 270 | max-width: 100%; 271 | overflow: hidden; 272 | width: 300px; 273 | margin: 0 40px 50px 0; 274 | background: rgba(0,0,0,0.1); 275 | height: 400px; 276 | position: relative; 277 | } 278 | 279 | .mockup-left::after { 280 | content:'\2234'; 281 | width: 100%; 282 | height: 100%; 283 | position: absolute; 284 | top: 0; 285 | left: 0; 286 | color: rgba(0,0,0,0.05); 287 | font-size: 15em; 288 | } 289 | 290 | .mockup-right { 291 | text-align: left; 292 | } 293 | 294 | html.demo-7, .demo-7 body { 295 | overflow-x: hidden; 296 | height: 100%; 297 | } 298 | 299 | .demo-7 .container { 300 | width: 100%; 301 | position: absolute; 302 | -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0.1s; 303 | transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0.1s; 304 | } 305 | 306 | .no-js.demo-7 .container { 307 | width: calc(100% - 300px); 308 | right: 0; 309 | } 310 | 311 | .pushed.container { 312 | -webkit-transition-duration: 0.5s; 313 | transition-duration: 0.5s; 314 | -webkit-transform: translateX(300px); 315 | transform: translateX(300px); 316 | } 317 | 318 | @media screen and (max-width: 770px) { 319 | .mockup-left { 320 | float: none; 321 | margin: 0 auto 20px; 322 | } 323 | 324 | .mockup-right { 325 | text-align: center; 326 | } 327 | 328 | .joiner { 329 | display: block; 330 | } 331 | } 332 | 333 | @media screen and (max-width: 400px) { 334 | .mockup-content > span:nth-last-child(2) { 335 | width: calc(100% - 210px); 336 | } 337 | } 338 | 339 | @media screen and (max-width: 25em) { 340 | 341 | .codrops-icon span { 342 | display: none; 343 | } 344 | 345 | } -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.8.1 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-csstransitions-shiv-cssclasses-prefixed-testprop-testallprops-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.8.0",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.csstransitions=function(){return D("transition")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,e.prefixed=function(a,b,c){return b?D(a,b,c):D(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f 2 | 3 | 4 | 5 | 6 | 7 | Morphing Buttons Concept | Demo 3 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | Previous Demo 23 | Back to the Codrops Article 24 |
25 |
26 |

Morphing Buttons Concept

27 |

Inspiration for revealing content by morphing the action element. Examples:

28 | 37 |
38 |
39 |

Click the button to see it expanding into a fullscreen overlay:

40 |
41 | 42 |
43 |
44 |
45 | Close the overlay 46 |

About Parsley

47 |

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

48 |

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

49 |

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

50 |

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

51 |

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

52 |

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

53 |
54 |
55 |
56 |
57 |

Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut juccama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.

58 |
59 |
60 |

If you enjoyed this demo you might also like:

61 | 62 | 63 |

Progress Button Styles

64 | 65 | 66 | 67 |

Sidebar Transitions

68 | 69 |
70 |
71 | 72 | 73 | 141 | 142 | -------------------------------------------------------------------------------- /fonts/blokk/BLOKKRegular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontXChange 20110222 at Fri Feb 1 20:10:43 2013 6 | By Bjørn Kvamme 7 | Copyright tomma 2013 8 | 9 | 10 | 11 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 66 | 68 | 70 | 72 | 74 | 76 | 78 | 80 | 82 | 84 | 86 | 88 | 90 | 92 | 94 | 96 | 98 | 100 | 102 | 104 | 106 | 108 | 110 | 112 | 114 | 116 | 118 | 120 | 122 | 124 | 126 | 128 | 130 | 132 | 134 | 136 | 138 | 140 | 142 | 144 | 146 | 148 | 150 | 152 | 154 | 156 | 158 | 160 | 162 | 164 | 166 | 168 | 170 | 172 | 174 | 176 | 178 | 180 | 182 | 184 | 186 | 188 | 190 | 192 | 194 | 196 | 198 | 200 | 202 | 204 | 206 | 208 | 210 | 212 | 214 | 216 | 218 | 220 | 222 | 224 | 226 | 228 | 230 | 232 | 233 | 234 | -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | /* Morph Button: Default Styles */ 2 | 3 | .morph-button { 4 | position: relative; 5 | display: block; 6 | margin: 0 auto; 7 | } 8 | 9 | .morph-button > button { 10 | position: relative; 11 | padding: 0 1em; 12 | border: none; 13 | background-color: #e85657; 14 | color: #f9f6e5; 15 | text-transform: uppercase; 16 | letter-spacing: 1px; 17 | font-weight: 700; 18 | line-height: 80px; 19 | overflow: hidden; 20 | } 21 | 22 | .morph-button.open > button { 23 | pointer-events: none; 24 | } 25 | 26 | .morph-content { 27 | pointer-events: none; 28 | } 29 | 30 | .morph-button.open .morph-content { 31 | pointer-events: auto; 32 | } 33 | 34 | /* Common styles for overlay and modal type (fixed morph) */ 35 | .morph-button-fixed, 36 | .morph-button-fixed .morph-content { 37 | width: 300px; 38 | height: 80px; 39 | } 40 | 41 | .morph-button-fixed > button { 42 | z-index: 1000; 43 | width: 100%; 44 | height: 100%; 45 | -webkit-transition: opacity 0.1s 0.5s; 46 | transition: opacity 0.1s 0.5s; 47 | } 48 | 49 | .morph-button-fixed.open > button { 50 | opacity: 0; 51 | -webkit-transition: opacity 0.1s; 52 | transition: opacity 0.1s; 53 | } 54 | 55 | .morph-button-fixed .morph-content { 56 | position: fixed; 57 | z-index: 900; 58 | opacity: 0; 59 | -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; 60 | transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; 61 | } 62 | 63 | .morph-button-fixed.open .morph-content { 64 | opacity: 1; 65 | } 66 | 67 | .morph-button-fixed .morph-content > div { 68 | visibility: hidden; 69 | height: 0; 70 | opacity: 0; 71 | -webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s; 72 | transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s; 73 | } 74 | 75 | .morph-button-fixed.open .morph-content > div { 76 | visibility: visible; 77 | height: auto; 78 | opacity: 1; 79 | -webkit-transition: opacity 0.3s 0.5s; 80 | transition: opacity 0.3s 0.5s; 81 | } 82 | 83 | .morph-button-fixed.active > button { 84 | z-index: 2000; 85 | } 86 | 87 | .morph-button-fixed.active .morph-content { 88 | z-index: 1900; 89 | } 90 | 91 | /* Transitions for overlay button and sidebar button */ 92 | .morph-button-overlay .morph-content, 93 | .morph-button-sidebar .morph-content { 94 | -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; 95 | transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; 96 | } 97 | 98 | .morph-button-overlay.open .morph-content, 99 | .morph-button-sidebar.open .morph-content { 100 | -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; 101 | transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; 102 | } 103 | 104 | /* Morph Button Style: Overlay */ 105 | .morph-button.morph-button-overlay { 106 | margin: 50px auto; 107 | } 108 | 109 | .morph-button-overlay .morph-content { 110 | overflow: hidden; 111 | background: #e85657; 112 | } 113 | 114 | .morph-button-overlay.open .morph-content { 115 | top: 0 !important; 116 | left: 0 !important; 117 | width: 100%; 118 | height: 100%; 119 | } 120 | 121 | /* Morph Button Style: Modal */ 122 | .morph-button-modal::before { 123 | position: fixed; 124 | top: 0; 125 | left: 0; 126 | z-index: 800; 127 | width: 100%; 128 | height: 100%; 129 | background: rgba(0,0,0,0.5); 130 | content: ''; 131 | opacity: 0; 132 | -webkit-transition: opacity 0.5s; 133 | transition: opacity 0.5s; 134 | pointer-events: none; 135 | } 136 | 137 | .morph-button-modal.open::before { 138 | opacity: 1; 139 | pointer-events: auto; 140 | } 141 | 142 | .morph-button-modal.active::before { 143 | z-index: 1800; 144 | } 145 | 146 | .morph-button-modal .morph-content { 147 | overflow: hidden; 148 | -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; 149 | transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; 150 | } 151 | 152 | .morph-button-modal.open .morph-content { 153 | top: 50% !important; 154 | left: 50% !important; 155 | margin: -210px 0 0 -300px; 156 | width: 600px; 157 | height: 420px; 158 | -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; 159 | transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; 160 | } 161 | 162 | /* Colors and sizes for individual modals */ 163 | .morph-button.morph-button-modal-1 { 164 | float: left; 165 | } 166 | 167 | .morph-button.morph-button-modal-2, 168 | .morph-button.morph-button-modal-3 { 169 | display: inline-block; 170 | margin: 10px 15px; 171 | } 172 | 173 | .morph-button-modal-1 > button, 174 | .morph-button-modal-1 .morph-content { 175 | background-color: #553445; 176 | } 177 | 178 | .morph-button-modal-2 > button, 179 | .morph-button-modal-2 .morph-content, 180 | .morph-button-modal-3 > button, 181 | .morph-button-modal-3 .morph-content { 182 | background-color: #fef0e3; 183 | color: #e75854; 184 | } 185 | 186 | .morph-button-modal-4 { 187 | display: inline-block; 188 | } 189 | 190 | .morph-button-modal-4 > button, 191 | .morph-button-modal-4 .morph-content { 192 | background-color: #faf1e0; 193 | color: #553445; 194 | } 195 | 196 | .morph-button-modal-4 > button span, 197 | .morph-button-modal-4 .morph-clone { 198 | padding-left: 10px; 199 | color: #286f81; 200 | } 201 | 202 | .morph-button-modal-4 .morph-clone { 203 | position: absolute; 204 | right: 34px; 205 | bottom: 30px; 206 | z-index: 100; 207 | letter-spacing: 1px; 208 | font-weight: 700; 209 | -webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s; 210 | transition: bottom 0.4s 0.1s, right 0.4s 0.1s; 211 | } 212 | 213 | .morph-button-modal-4.open .morph-clone, 214 | .no-js .morph-button-modal-4 .morph-clone { 215 | right: 10px; 216 | bottom: 10px; 217 | } 218 | 219 | .morph-button-modal-1::before { 220 | background: rgba(240,221,204,0.7); 221 | } 222 | 223 | .morph-button-modal-2.open .morph-content { 224 | margin: -210px 0 0 -170px; 225 | width: 340px; 226 | height: 420px; 227 | } 228 | 229 | .morph-button-modal-3.open .morph-content { 230 | margin: -255px 0 0 -210px; 231 | width: 420px; 232 | height: 510px; 233 | } 234 | 235 | .morph-button-modal-3.open .morph-content > div { 236 | height: 420px; 237 | } 238 | 239 | .morph-button-modal-2.open .morph-content > div, 240 | .morph-button-modal-3.open .morph-content > div { 241 | -webkit-transition: opacity 0.3s 0.3s; 242 | transition: opacity 0.3s 0.3s; 243 | } 244 | 245 | .morph-button-modal-4.open .morph-content { 246 | margin: -200px 0 0 -320px; 247 | width: 640px; 248 | height: 400px; 249 | } 250 | 251 | /* Morph Button Style: In the content flow */ 252 | .morph-button-inflow { 253 | overflow: hidden; 254 | max-width: 100%; 255 | height: 70px; 256 | } 257 | 258 | .morph-button-inflow > button { 259 | width: 100%; 260 | line-height: 70px; 261 | } 262 | 263 | .morph-button-inflow .morph-content { 264 | position: absolute; 265 | top: 0; 266 | left: 0; 267 | width: 100%; 268 | } 269 | 270 | .morph-button-inflow .morph-content .morph-clone { 271 | padding: 0; 272 | font-weight: 700; 273 | font-size: 1.5em; 274 | line-height: 70px; 275 | } 276 | 277 | /* Colors and sizes for individual in flow buttons */ 278 | .morph-button-inflow-1 { 279 | width: 600px; 280 | margin: 2em auto; 281 | -webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1); 282 | transition: height 0.5s cubic-bezier(0.7,0,0.3,1); 283 | } 284 | 285 | .morph-button-inflow-1 > button span { 286 | visibility: hidden; 287 | } 288 | 289 | .morph-button-inflow-1 .morph-content .morph-clone { 290 | color: #f9f6e5; 291 | background: #e85657; 292 | } 293 | 294 | .morph-button-inflow-2 { 295 | position: absolute; 296 | top: 50%; 297 | left: 50%; 298 | width: 220px; 299 | background-color: #fef0e3; 300 | -webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s; 301 | transition: height 0.3s, width 0.3s, transform 0.3s; 302 | -webkit-transform: translateX(-50%) translateY(-50%); 303 | transform: translateX(-50%) translateY(-50%); 304 | } 305 | 306 | .morph-button-inflow-2 > button { 307 | position: absolute; 308 | top: 0; 309 | left: 0; 310 | width: 100%; 311 | height: 100%; 312 | background-color: transparent; 313 | color: #e75854; 314 | -webkit-transition: -webkit-transform 0.3s; 315 | transition: transform 0.3s; 316 | } 317 | 318 | .morph-button-inflow-2.open > button { 319 | -webkit-transform: translateX(-100%); 320 | transform: translateX(-100%); 321 | } 322 | 323 | .morph-button-inflow-2 .morph-content { 324 | width: 260px; 325 | height: 200px; 326 | } 327 | 328 | .morph-button-inflow-2.open { 329 | width: 260px; 330 | } 331 | 332 | /* Morph Button Style: Sidebar */ 333 | .morph-button-sidebar, 334 | .morph-button-sidebar .morph-content { 335 | width: 60px; 336 | height: 60px; 337 | } 338 | 339 | .morph-button-sidebar { 340 | position: fixed; 341 | bottom: 50px; 342 | left: 50px; 343 | } 344 | 345 | .morph-button-sidebar > button { 346 | line-height: 60px; 347 | font-size: 1.6em; 348 | padding: 0; 349 | } 350 | 351 | .morph-button-sidebar .morph-content { 352 | background: #e85657; 353 | } 354 | 355 | .morph-button-sidebar.open .morph-content { 356 | top: 0 !important; 357 | left: 0 !important; 358 | width: 300px; 359 | height: 100%; 360 | overflow: hidden; 361 | -webkit-backface-visibility: hidden; 362 | } 363 | 364 | /* Let's add some nice easing for all cases */ 365 | .morph-button .morph-content, 366 | .morph-button.open .morph-content, 367 | .morph-button-modal-4 .morph-clone { 368 | -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 369 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 370 | } 371 | 372 | /* Helper classes */ 373 | .noscroll { 374 | overflow: hidden; 375 | } 376 | 377 | .morph-button-overlay.scroll .morph-content { 378 | overflow-y: scroll; 379 | } 380 | 381 | .morph-button-sidebar.scroll .morph-content { 382 | overflow: auto; 383 | } 384 | 385 | /* No JS fallback: let's hide the button and show the content */ 386 | .no-js .morph-button > button { 387 | display: none; 388 | } 389 | 390 | .no-js .morph-button { 391 | margin: 10px 0; 392 | float: none; 393 | } 394 | 395 | .no-js .morph-button, 396 | .no-js .morph-button .morph-content, 397 | .no-js .morph-button .morph-content > div { 398 | position: relative; 399 | width: auto; 400 | height: auto; 401 | opacity: 1; 402 | visibility: visible; 403 | top: auto; 404 | left: auto; 405 | -webkit-transform: none; 406 | transform: none; 407 | pointer-events: auto; 408 | } 409 | 410 | .no-js .morph-button .morph-content .icon-close { 411 | display: none; 412 | } 413 | 414 | .no-js .morph-button-sidebar { 415 | width: 300px; 416 | position: fixed; 417 | top: 0; 418 | left: 0; 419 | margin: 0; 420 | height: 100%; 421 | background: #e85657; 422 | overflow: auto; 423 | } 424 | 425 | .no-transition { 426 | -webkit-transition: none !important; 427 | transition: none !important; 428 | } 429 | 430 | /* Media Queries */ 431 | 432 | @media screen and (max-width: 600px) { 433 | .morph-button-modal.open .morph-content { 434 | top: 0% !important; 435 | left: 0% !important; 436 | margin: 0; 437 | width: 100%; 438 | height: 100%; 439 | overflow-y: scroll; 440 | -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; 441 | transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; 442 | } 443 | } 444 | 445 | @media screen and (max-width: 400px) { 446 | .morph-button-fixed, 447 | .morph-button-fixed .morph-content { 448 | width: 200px; 449 | height: 80px; 450 | } 451 | 452 | .morph-button-fixed > button { 453 | font-size: 75%; 454 | } 455 | 456 | .morph-button-sidebar > button { 457 | font-size: 1.6em; 458 | } 459 | 460 | .morph-button-inflow .morph-content .morph-clone { 461 | font-size: 0.9em; 462 | } 463 | 464 | .morph-button-modal-4, 465 | .morph-button-modal-4 .morph-content { 466 | width: 220px; 467 | height: 120px; 468 | } 469 | 470 | .morph-button-modal-4 > button { 471 | font-size: 100%; 472 | line-height: 50px; 473 | } 474 | 475 | .morph-button-modal-4 > button span { 476 | display: block; 477 | } 478 | 479 | .morph-button-modal-4 .morph-clone { 480 | right: 83px; 481 | bottom: 26px; 482 | } 483 | 484 | .morph-button-sidebar, 485 | .morph-button-sidebar .morph-content { 486 | width: 100% !important; 487 | height: 60px !important; 488 | } 489 | 490 | .morph-button-sidebar { 491 | bottom: 0px; 492 | left: 0px; 493 | } 494 | 495 | .morph-button-sidebar.open .morph-content { 496 | height: 100% !important; 497 | } 498 | } -------------------------------------------------------------------------------- /css/content.css: -------------------------------------------------------------------------------- 1 | /* Icons */ 2 | @font-face { 3 | font-weight: normal; 4 | font-style: normal; 5 | font-family: 'icomoon'; 6 | src:url('../fonts/icomoon/icomoon.eot?i64fx9'); 7 | src:url('../fonts/icomoon/icomoon.eot?#iefixi64fx9') format('embedded-opentype'), 8 | url('../fonts/icomoon/icomoon.woff?i64fx9') format('woff'), 9 | url('../fonts/icomoon/icomoon.ttf?i64fx9') format('truetype'), 10 | url('../fonts/icomoon/icomoon.svg?i64fx9#icomoon') format('svg'); 11 | } 12 | 13 | .icon-close { 14 | z-index: 100; 15 | display: block; 16 | overflow: hidden; 17 | width: 3em; 18 | height: 3em; 19 | text-align: center; 20 | line-height: 3; 21 | cursor: pointer; 22 | } 23 | 24 | .icon:before { 25 | position: relative; 26 | display: block; 27 | width: 100%; 28 | height: 100%; 29 | text-transform: none; 30 | font-weight: normal; 31 | font-style: normal; 32 | font-variant: normal; 33 | font-family: 'icomoon'; 34 | speak: none; 35 | -webkit-font-smoothing: antialiased; 36 | -moz-osx-font-smoothing: grayscale; 37 | } 38 | 39 | .icon-camera:before { 40 | content: "\e017"; 41 | } 42 | 43 | .icon-server:before { 44 | content: "\e022"; 45 | } 46 | 47 | .icon-heart:before { 48 | content: "\e024"; 49 | } 50 | 51 | .icon-zoom-in:before { 52 | content: "\e037"; 53 | } 54 | 55 | .icon-microphone:before { 56 | content: "\e048"; 57 | } 58 | 59 | .icon-cloud:before { 60 | content: "\e066"; 61 | } 62 | 63 | .icon-user:before { 64 | content: "\e074"; 65 | } 66 | 67 | .icon-briefcase:before { 68 | content: "\e075"; 69 | } 70 | 71 | .icon-globe:before { 72 | content: "\e078"; 73 | } 74 | 75 | .icon-cog::before { 76 | content: "\e600"; 77 | } 78 | 79 | .icon-close::before { 80 | content: "\e601"; 81 | } 82 | 83 | .icon-play::before { 84 | content: "\e602"; 85 | } 86 | 87 | .icon-pause::before { 88 | content: "\e603"; 89 | } 90 | 91 | .icon-close { 92 | position: absolute; 93 | top: 20px; 94 | right: 20px; 95 | } 96 | 97 | .icon-close:hover { 98 | color: #a50a05; 99 | } 100 | 101 | /* Styles for dummy content */ 102 | 103 | /* Style for overlay */ 104 | 105 | .content-style-overlay { 106 | padding: 100px 50px; 107 | text-align: center; 108 | } 109 | 110 | .content-style-overlay h2 { 111 | margin: 0 0 1em 0; 112 | padding: 0; 113 | font-weight: 300; 114 | font-size: 3em; 115 | } 116 | 117 | .content-style-overlay p { 118 | margin: 0 auto; 119 | padding: 10px 0; 120 | max-width: 700px; 121 | text-align: justify; 122 | font-weight: 300; 123 | font-size: 1.5em; 124 | } 125 | 126 | .content-style-overlay .icon-close { 127 | border: 2px solid #f9e1c9; 128 | border-radius: 50%; 129 | line-height: 2.8; 130 | } 131 | 132 | .content-style-overlay .icon-close:hover { 133 | border-color: #a50a05; 134 | } 135 | 136 | /* Style for text modal */ 137 | .content-style-text { 138 | padding: 60px; 139 | text-align: left; 140 | } 141 | 142 | .content-style-text h2 { 143 | margin: 0 0 0.5em 0; 144 | font-weight: 300; 145 | font-size: 1.85em; 146 | } 147 | 148 | .content-style-text p { 149 | color: rgba(255,255,255,0.5); 150 | font-weight: 300; 151 | font-size: 1.15em; 152 | line-height: 1.4; 153 | } 154 | 155 | .content-style-text label { 156 | padding: 10px; 157 | color: #f9e1c9; 158 | font-weight: bold; 159 | } 160 | 161 | .content-style-text .icon-close { 162 | top: 0; 163 | right: 0; 164 | color: rgba(0,0,0,0.2); 165 | } 166 | 167 | .content-style-text .icon-close:hover { 168 | color: #f9e1c9; 169 | } 170 | 171 | /* Style for form modal */ 172 | .content-style-form { 173 | position: relative; 174 | text-align: left; 175 | } 176 | 177 | .content-style-form h2 { 178 | margin: 0; 179 | padding: 0.4em 0 0.3em; 180 | text-align: center; 181 | font-weight: 300; 182 | font-size: 3.5em; 183 | } 184 | 185 | .content-style-form form { 186 | padding: 10px 30px; 187 | } 188 | 189 | .content-style-form form p { 190 | margin: 0 0 5px 0; 191 | font-size: 0.7em; 192 | } 193 | 194 | .content-style-form label { 195 | display: block; 196 | padding: 10px 0 0; 197 | color: #d5bba4; 198 | text-transform: uppercase; 199 | letter-spacing: 1px; 200 | font-weight: bold; 201 | } 202 | 203 | .content-style-form input[type="text"], 204 | .content-style-form input[type="password"] { 205 | padding: 10px; 206 | width: 100%; 207 | border: 2px solid #ebd3bd; 208 | background: transparent; 209 | color: #b09a86; 210 | font-weight: 300; 211 | font-size: 2.2em; 212 | } 213 | 214 | .content-style-form input[type="text"]:focus, 215 | .content-style-form input[type="password"]:focus { 216 | border-color: #e75854; 217 | color: #e75854; 218 | } 219 | 220 | .content-style-form input:focus { 221 | outline: 0; 222 | } 223 | 224 | .content-style-form button { 225 | display: block; 226 | margin-top: 2.5em; 227 | padding: 1.5em; 228 | width: 100%; 229 | border: none; 230 | background: #e75854; 231 | color: #f9f6e5; 232 | text-transform: uppercase; 233 | letter-spacing: 1px; 234 | font-weight: 800; 235 | font-size: 1.25em; 236 | } 237 | 238 | .content-style-form .icon-close { 239 | top: 0; 240 | right: 0; 241 | color: #ebd3bd; 242 | font-size: 75%; 243 | } 244 | 245 | .content-style-form .icon-close:hover { 246 | color: #e75854; 247 | } 248 | 249 | .js .content-style-form-1 h2, 250 | .js .content-style-form-1 p, 251 | .js .content-style-form-1 .icon-close { 252 | opacity: 0; 253 | -webkit-transition: opacity 0.2s 0.35s, -webkit-transform 0.2s 0.35s; 254 | transition: opacity 0.2s 0.35s, transform 0.2s 0.35s; 255 | -webkit-transform: scale(0.85); 256 | transform: scale(0.85); 257 | } 258 | 259 | .content-style-form-1 p:first-child { 260 | -webkit-transition-delay: 0.4s; 261 | transition-delay: 0.4s; 262 | } 263 | 264 | .content-style-form-1 p:nth-child(2) { 265 | -webkit-transition-delay: 0.45s; 266 | transition-delay: 0.45s; 267 | } 268 | 269 | .content-style-form-1 p:nth-child(3) { 270 | -webkit-transition-delay: 0.5s; 271 | transition-delay: 0.5s; 272 | } 273 | 274 | .morph-button.open .content-style-form-1 h2, 275 | .morph-button.open .content-style-form-1 p, 276 | .morph-button.open .content-style-form-1 .icon-close { 277 | opacity: 1; 278 | -webkit-transform: scale(1); 279 | transform: scale(1); 280 | } 281 | 282 | .js .content-style-form-2 h2, 283 | .js .content-style-form-2 p, 284 | .js .content-style-form-2 .icon-close { 285 | opacity: 0; 286 | -webkit-transition: opacity 0.2s 0.3s, -webkit-transform 0.2s 0.3s; 287 | transition: opacity 0.2s 0.3s, transform 0.2s 0.3s; 288 | -webkit-transform: translateY(50px); 289 | transform: translateY(50px); 290 | } 291 | 292 | .content-style-form-2 p:first-child { 293 | -webkit-transition-delay: 0.35s; 294 | transition-delay: 0.35s; 295 | } 296 | 297 | .content-style-form-2 p:nth-child(2) { 298 | -webkit-transition-delay: 0.4s; 299 | transition-delay: 0.4s; 300 | } 301 | 302 | .content-style-form-2 p:nth-child(3) { 303 | -webkit-transition-delay: 0.45s; 304 | transition-delay: 0.45s; 305 | } 306 | 307 | .content-style-form-2 p:nth-child(4) { 308 | -webkit-transition-delay: 0.5s; 309 | transition-delay: 0.5s; 310 | } 311 | 312 | .morph-button.open .content-style-form-2 h2, 313 | .morph-button.open .content-style-form-2 p, 314 | .morph-button.open .content-style-form-2 .icon-close { 315 | opacity: 1; 316 | -webkit-transform: translateY(0); 317 | transform: translateY(0); 318 | } 319 | 320 | .content-style-form-4 form { 321 | padding: 30px; 322 | background: #fff; 323 | color: #ccb096; 324 | font-size: 1.5em; 325 | -webkit-perspective: 1000px; 326 | perspective: 1000px; 327 | } 328 | 329 | .content-style-form-4 input[type="text"] { 330 | border: none; 331 | background-color: #f0f0f0; 332 | } 333 | 334 | .content-style-form-4 form button { 335 | background: #ba997b; 336 | } 337 | 338 | .content-style-form-4 form button:focus, 339 | .content-style-form-4 form button:hover { 340 | background: #a9896d; 341 | } 342 | 343 | .js .content-style-form-4 p { 344 | opacity: 0; 345 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 346 | transition: opacity 0.3s, transform 0.3s; 347 | -webkit-transform: rotateX(-45deg); 348 | transform: rotateX(-45deg); 349 | -webkit-transform-origin: center top; 350 | transform-origin: center top; 351 | } 352 | 353 | .morph-button.open .content-style-form-4 p { 354 | opacity: 1; 355 | -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.4s 0.2s; 356 | transition: opacity 0.4s 0.2s, transform 0.4s 0.2s; 357 | -webkit-transform: rotateY(0deg); 358 | transform: rotateY(0deg); 359 | } 360 | 361 | .morph-button.open .content-style-form-4 p:nth-child(2) { 362 | -webkit-transition-delay: 0.35s; 363 | transition-delay: 0.35s; 364 | } 365 | 366 | .content-style-social { 367 | padding: 30px; 368 | text-align: left; 369 | } 370 | 371 | .morph-button-inflow-2 > button svg { 372 | display: inline-block; 373 | padding-right: 10px; 374 | width: 20px; 375 | height: 20px; 376 | vertical-align: -5%; 377 | } 378 | 379 | .morph-button-inflow-2 > button svg path { 380 | fill: #e75854; 381 | } 382 | 383 | .content-style-social a { 384 | display: block; 385 | padding: 0.5em 0; 386 | color: #67c2d4; 387 | vertical-align: middle; 388 | text-transform: uppercase; 389 | letter-spacing: 1px; 390 | font-weight: 700; 391 | font-size: 0.8em; 392 | line-height: 32px; 393 | } 394 | 395 | .js .content-style-social a { 396 | -webkit-transition: -webkit-transform 0.3s; 397 | transition: transform 0.3s; 398 | -webkit-transform: translateX(100%); 399 | transform: translateX(100%); 400 | } 401 | 402 | .content-style-social a:hover { 403 | color: #e75854; 404 | } 405 | 406 | .content-style-social a:hover svg path { 407 | fill: #e75854; 408 | } 409 | 410 | .content-style-social a svg { 411 | display: inline-block; 412 | padding-right: 10px; 413 | vertical-align: middle; 414 | -webkit-backface-visibility: hidden; 415 | } 416 | 417 | .morph-button-inflow.open .content-style-social a { 418 | -webkit-transform: translateX(0); 419 | transform: translateX(0); 420 | } 421 | 422 | .morph-button-inflow.open .content-style-social a:nth-child(2) { 423 | -webkit-transition-delay: 0.05s; 424 | transition-delay: 0.05s; 425 | } 426 | 427 | .morph-button-inflow.open .content-style-social a:nth-child(3) { 428 | -webkit-transition-delay: 0.1s; 429 | transition-delay: 0.1s; 430 | } 431 | 432 | .content-style-video { 433 | text-align: left; 434 | } 435 | 436 | .video-mockup { 437 | width: 640px; 438 | height: 360px; 439 | max-width: 100%; 440 | background: url(../img/rated.png) no-repeat center center; 441 | background-size: 100%; 442 | } 443 | 444 | .content-style-video .icon-close, 445 | .content-style-video .icon-pause { 446 | color: #286f81; 447 | } 448 | 449 | .content-style-video .icon-close { 450 | top: 0; 451 | right: 0; 452 | } 453 | 454 | .content-style-video .icon-close:hover { 455 | color: rgba(0,0,0,0.4); 456 | } 457 | 458 | .controls { 459 | bottom: 0px; 460 | left: 0px; 461 | width: 100%; 462 | } 463 | 464 | .js .controls { 465 | position: absolute; 466 | } 467 | 468 | .controls span { 469 | display: inline-block; 470 | } 471 | 472 | .content-style-video .icon-pause { 473 | overflow: hidden; 474 | width: 2.5em; 475 | height: 2.5em; 476 | text-align: center; 477 | line-height: 2.5; 478 | cursor: pointer; 479 | vertical-align: bottom; 480 | } 481 | 482 | .content-style-video span.time { 483 | color: #286f81; 484 | letter-spacing: 1px; 485 | font-weight: 700; 486 | line-height: 40px; 487 | } 488 | 489 | .controls::after { 490 | content: ''; 491 | position: absolute; 492 | height: 7px; 493 | left: 100px; 494 | right: 70px; 495 | bottom: 16px; 496 | background: #aaa; 497 | } 498 | 499 | .content-style-sidebar h2 { 500 | font-weight: 300; 501 | font-size: 2em; 502 | padding: 0.75em 0 0.75em 1em; 503 | margin: 0; 504 | color: #bb4445; 505 | } 506 | 507 | .content-style-sidebar .icon-close { 508 | top: 0; 509 | right: 0; 510 | font-size: 0.85em; 511 | } 512 | 513 | .content-style-sidebar ul { 514 | list-style: none; 515 | margin: 0; 516 | padding: 0; 517 | } 518 | 519 | .content-style-sidebar ul li a { 520 | display: block; 521 | padding: 12px 20px; 522 | color: #faf1e0; 523 | font-weight: 400; 524 | font-size: 1.05em; 525 | box-shadow: inset 0 1px rgba(0,0,0,0.1); 526 | } 527 | 528 | .content-style-sidebar ul li:last-child a { 529 | box-shadow: inset 0 1px rgba(0,0,0,0.1), inset 0 -1px rgba(0,0,0,0.1); 530 | } 531 | 532 | .content-style-sidebar ul li a:hover { 533 | background: rgba(0,0,0,0.1); 534 | box-shadow: none; 535 | } 536 | 537 | .content-style-sidebar ul .icon::before { 538 | display: inline-block; 539 | width: auto; 540 | margin-right: 20px; 541 | font-size: 1.5em; 542 | vertical-align: -10%; 543 | color: rgba(0,0,0,0.2); 544 | } 545 | 546 | @media screen and (max-width: 770px) { 547 | .content-style-overlay { 548 | font-size: 75%; 549 | } 550 | 551 | .content-style-overlay .icon-close { 552 | top: 5px; 553 | right: 5px; 554 | } 555 | } 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | --------------------------------------------------------------------------------