├── fonts └── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.ttf │ ├── codropsicons.woff │ ├── license.txt │ └── codropsicons.svg ├── README.md ├── css ├── normalize.css ├── demo.css └── component.css ├── js └── modernizr.custom.js └── index.html /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CreativeLinkEffects/HEAD/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CreativeLinkEffects/HEAD/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CreativeLinkEffects/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 | 2 | Creative Link Effects 3 | ========= 4 | An inspirational collection of experimental link effects mostly using transitions on pseudo-elements. 5 | 6 | [article on Codrops](http://tympanus.net/codrops/?p=16182) 7 | 8 | [demo](http://tympanus.net/Development/CreativeLinkEffects/) 9 | 10 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/) -------------------------------------------------------------------------------- /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;} -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Raleway:400,300,700); 2 | @font-face { 3 | font-family: 'codropsicons'; 4 | src:url('../fonts/codropsicons/codropsicons.eot'); 5 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 6 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 7 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 8 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | 13 | .container > header, 14 | .codrops-top { 15 | font-family: 'Lato', Arial, sans-serif; 16 | } 17 | 18 | .container > header { 19 | margin: 0 auto; 20 | padding: 2em; 21 | text-align: center; 22 | color: #89867e; 23 | } 24 | 25 | .container > header h1 { 26 | font-size: 2.625em; 27 | line-height: 1.3; 28 | margin: 0; 29 | font-weight: 300; 30 | } 31 | 32 | .container > header span { 33 | display: block; 34 | font-size: 60%; 35 | color: #ceccc6; 36 | padding: 0 0 0.6em 0.1em; 37 | } 38 | 39 | /* To Navigation Style */ 40 | .codrops-top { 41 | background: #fff; 42 | background: rgba(255, 255, 255, 0.6); 43 | text-transform: uppercase; 44 | width: 100%; 45 | font-size: 0.69em; 46 | line-height: 2.2; 47 | } 48 | 49 | .codrops-top a { 50 | text-decoration: none; 51 | padding: 0 1em; 52 | letter-spacing: 0.1em; 53 | color: #888; 54 | display: inline-block; 55 | } 56 | 57 | .codrops-top a:hover { 58 | background: rgba(255,255,255,0.95); 59 | color: #716d62; 60 | } 61 | 62 | .codrops-top span.right { 63 | float: right; 64 | } 65 | 66 | .codrops-top span.right a { 67 | float: left; 68 | display: block; 69 | } 70 | 71 | .codrops-icon:before { 72 | font-family: 'codropsicons'; 73 | margin: 0 4px; 74 | speak: none; 75 | font-style: normal; 76 | font-weight: normal; 77 | font-variant: normal; 78 | text-transform: none; 79 | line-height: 1; 80 | -webkit-font-smoothing: antialiased; 81 | } 82 | 83 | .codrops-icon-drop:before { 84 | content: "\e001"; 85 | } 86 | 87 | .codrops-icon-prev:before { 88 | content: "\e004"; 89 | } 90 | 91 | .container > section { 92 | margin: 0 auto; 93 | padding: 10em 3em; 94 | text-align: center; 95 | } 96 | 97 | .color-1 { 98 | background: #435a6b; 99 | } 100 | 101 | .color-2 { 102 | background: #f39c12; 103 | } 104 | 105 | .color-3 { 106 | background: #2ac56c; 107 | } 108 | 109 | .color-4 { 110 | background: #0e83cd; 111 | } 112 | 113 | .color-5 { 114 | background: #cd4436; 115 | } 116 | 117 | .color-6 { 118 | background: #f19f0f; 119 | } 120 | 121 | .color-7 { 122 | background: #3fa46a; 123 | } 124 | 125 | .color-8 { 126 | background: #ecf0f1; 127 | } 128 | 129 | .color-9 { 130 | background: #9e487f; 131 | } 132 | 133 | .color-10 { 134 | background: #16a085; 135 | } 136 | 137 | .color-11 { 138 | background: #aab7b7; 139 | } 140 | 141 | @media screen and (max-width: 25em) { 142 | 143 | .codrops-icon span { 144 | display: none; 145 | } 146 | 147 | } -------------------------------------------------------------------------------- /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/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-csstransforms3d-shiv-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(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=u.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(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(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},z(""),i=k=null,function(a,b){function k(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 l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=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){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.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 | Creative Link Effects 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 |

Creative Link Effects Subtle and modern effects for links or menu items

26 |

Please note that not every browser supports transitions on pseudo elements.

27 |
28 |
29 | 36 |
37 |
38 | 45 |
46 |
47 | 54 |
55 |
56 | 63 |
64 |
65 | 72 |
73 |
74 | 81 |
82 |
83 | 90 |
91 |
92 | 99 |
100 |
101 | 108 |
109 |
110 | 117 |
118 |
119 | 126 |
127 |
128 | 135 |
136 |
137 | 144 |
145 |
146 | 153 |
154 |
155 | 162 |
163 |
164 | 171 |
172 |
173 | 180 |
181 |
182 | 189 |
190 |
191 | 198 |
199 |
200 | 207 |
208 |
209 | 216 |
217 |
218 | 219 | -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:after, 3 | *::before { 4 | -webkit-box-sizing: border-box; 5 | -moz-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: 'Raleway', sans-serif; 11 | } 12 | 13 | nav a { 14 | position: relative; 15 | display: inline-block; 16 | margin: 15px 25px; 17 | outline: none; 18 | color: #fff; 19 | text-decoration: none; 20 | text-transform: uppercase; 21 | letter-spacing: 1px; 22 | font-weight: 400; 23 | text-shadow: 0 0 1px rgba(255,255,255,0.3); 24 | font-size: 1.35em; 25 | } 26 | 27 | nav a:hover, 28 | nav a:focus { 29 | outline: none; 30 | } 31 | 32 | /* Effect 1: Brackets */ 33 | .cl-effect-1 a::before, 34 | .cl-effect-1 a::after { 35 | display: inline-block; 36 | opacity: 0; 37 | -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; 38 | -moz-transition: -moz-transform 0.3s, opacity 0.2s; 39 | transition: transform 0.3s, opacity 0.2s; 40 | } 41 | 42 | .cl-effect-1 a::before { 43 | margin-right: 10px; 44 | content: '['; 45 | -webkit-transform: translateX(20px); 46 | -moz-transform: translateX(20px); 47 | transform: translateX(20px); 48 | } 49 | 50 | .cl-effect-1 a::after { 51 | margin-left: 10px; 52 | content: ']'; 53 | -webkit-transform: translateX(-20px); 54 | -moz-transform: translateX(-20px); 55 | transform: translateX(-20px); 56 | } 57 | 58 | .cl-effect-1 a:hover::before, 59 | .cl-effect-1 a:hover::after, 60 | .cl-effect-1 a:focus::before, 61 | .cl-effect-1 a:focus::after { 62 | opacity: 1; 63 | -webkit-transform: translateX(0px); 64 | -moz-transform: translateX(0px); 65 | transform: translateX(0px); 66 | } 67 | 68 | /* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */ 69 | .cl-effect-2 a { 70 | line-height: 44px; 71 | -webkit-perspective: 1000px; 72 | -moz-perspective: 1000px; 73 | perspective: 1000px; 74 | } 75 | 76 | .cl-effect-2 a span { 77 | position: relative; 78 | display: inline-block; 79 | padding: 0 14px; 80 | background: #2195de; 81 | -webkit-transition: -webkit-transform 0.3s; 82 | -moz-transition: -moz-transform 0.3s; 83 | transition: transform 0.3s; 84 | -webkit-transform-origin: 50% 0; 85 | -moz-transform-origin: 50% 0; 86 | transform-origin: 50% 0; 87 | -webkit-transform-style: preserve-3d; 88 | -moz-transform-style: preserve-3d; 89 | transform-style: preserve-3d; 90 | } 91 | 92 | .csstransforms3d .cl-effect-2 a span::before { 93 | position: absolute; 94 | top: 100%; 95 | left: 0; 96 | width: 100%; 97 | height: 100%; 98 | background: #0965a0; 99 | content: attr(data-hover); 100 | -webkit-transition: background 0.3s; 101 | -moz-transition: background 0.3s; 102 | transition: background 0.3s; 103 | -webkit-transform: rotateX(-90deg); 104 | -moz-transform: rotateX(-90deg); 105 | transform: rotateX(-90deg); 106 | -webkit-transform-origin: 50% 0; 107 | -moz-transform-origin: 50% 0; 108 | transform-origin: 50% 0; 109 | } 110 | 111 | .cl-effect-2 a:hover span, 112 | .cl-effect-2 a:focus span { 113 | -webkit-transform: rotateX(90deg) translateY(-22px); 114 | -moz-transform: rotateX(90deg) translateY(-22px); 115 | transform: rotateX(90deg) translateY(-22px); 116 | } 117 | 118 | .csstransforms3d .cl-effect-2 a:hover span::before, 119 | .csstransforms3d .cl-effect-2 a:focus span::before { 120 | background: #28a2ee; 121 | } 122 | 123 | /* Effect 3: bottom line slides/fades in */ 124 | .cl-effect-3 a { 125 | padding: 8px 0; 126 | } 127 | 128 | .cl-effect-3 a::after { 129 | position: absolute; 130 | top: 100%; 131 | left: 0; 132 | width: 100%; 133 | height: 4px; 134 | background: rgba(0,0,0,0.1); 135 | content: ''; 136 | opacity: 0; 137 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 138 | -moz-transition: opacity 0.3s, -moz-transform 0.3s; 139 | transition: opacity 0.3s, transform 0.3s; 140 | -webkit-transform: translateY(10px); 141 | -moz-transform: translateY(10px); 142 | transform: translateY(10px); 143 | } 144 | 145 | .cl-effect-3 a:hover::after, 146 | .cl-effect-3 a:focus::after { 147 | opacity: 1; 148 | -webkit-transform: translateY(0px); 149 | -moz-transform: translateY(0px); 150 | transform: translateY(0px); 151 | } 152 | 153 | /* Effect 4: bottom border enlarge */ 154 | .cl-effect-4 a { 155 | padding: 0 0 10px; 156 | } 157 | 158 | .cl-effect-4 a::after { 159 | position: absolute; 160 | top: 100%; 161 | left: 0; 162 | width: 100%; 163 | height: 1px; 164 | background: #fff; 165 | content: ''; 166 | opacity: 0; 167 | -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; 168 | -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; 169 | transition: height 0.3s, opacity 0.3s, transform 0.3s; 170 | -webkit-transform: translateY(-10px); 171 | -moz-transform: translateY(-10px); 172 | transform: translateY(-10px); 173 | } 174 | 175 | .cl-effect-4 a:hover::after, 176 | .cl-effect-4 a:focus::after { 177 | height: 5px; 178 | opacity: 1; 179 | -webkit-transform: translateY(0px); 180 | -moz-transform: translateY(0px); 181 | transform: translateY(0px); 182 | } 183 | 184 | /* Effect 5: same word slide in */ 185 | .cl-effect-5 a { 186 | overflow: hidden; 187 | padding: 0 4px; 188 | height: 1em; 189 | } 190 | 191 | .cl-effect-5 a span { 192 | position: relative; 193 | display: inline-block; 194 | -webkit-transition: -webkit-transform 0.3s; 195 | -moz-transition: -moz-transform 0.3s; 196 | transition: transform 0.3s; 197 | } 198 | 199 | .cl-effect-5 a span::before { 200 | position: absolute; 201 | top: 100%; 202 | content: attr(data-hover); 203 | font-weight: 700; 204 | -webkit-transform: translate3d(0,0,0); 205 | -moz-transform: translate3d(0,0,0); 206 | transform: translate3d(0,0,0); 207 | } 208 | 209 | .cl-effect-5 a:hover span, 210 | .cl-effect-5 a:focus span { 211 | -webkit-transform: translateY(-100%); 212 | -moz-transform: translateY(-100%); 213 | transform: translateY(-100%); 214 | } 215 | 216 | /* Effect 6: right angle slides down over title */ 217 | .cl-effect-6 a { 218 | margin: 0 10px; 219 | padding: 10px 20px; 220 | } 221 | 222 | .cl-effect-6 a::before { 223 | position: absolute; 224 | top: 0; 225 | left: 0; 226 | width: 100%; 227 | height: 2px; 228 | background: #fff; 229 | content: ''; 230 | -webkit-transition: top 0.3s; 231 | -moz-transition: top 0.3s; 232 | transition: top 0.3s; 233 | } 234 | 235 | .cl-effect-6 a::after { 236 | position: absolute; 237 | top: 0; 238 | left: 0; 239 | width: 2px; 240 | height: 2px; 241 | background: #fff; 242 | content: ''; 243 | -webkit-transition: height 0.3s; 244 | -moz-transition: height 0.3s; 245 | transition: height 0.3s; 246 | } 247 | 248 | .cl-effect-6 a:hover::before { 249 | top: 100%; 250 | opacity: 1; 251 | } 252 | 253 | .cl-effect-6 a:hover::after { 254 | height: 100%; 255 | } 256 | 257 | /* Effect 7: second border slides up */ 258 | .cl-effect-7 a { 259 | padding: 12px 10px 10px; 260 | color: #566473; 261 | text-shadow: none; 262 | font-weight: 700; 263 | } 264 | 265 | .cl-effect-7 a::before, 266 | .cl-effect-7 a::after { 267 | position: absolute; 268 | top: 100%; 269 | left: 0; 270 | width: 100%; 271 | height: 3px; 272 | background: #566473; 273 | content: ''; 274 | -webkit-transition: -webkit-transform 0.3s; 275 | -moz-transition: -moz-transform 0.3s; 276 | transition: transform 0.3s; 277 | -webkit-transform: scale(0.85); 278 | -moz-transform: scale(0.85); 279 | transform: scale(0.85); 280 | } 281 | 282 | .cl-effect-7 a::after { 283 | opacity: 0; 284 | -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s; 285 | -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s; 286 | transition: top 0.3s, opacity 0.3s, transform 0.3s; 287 | } 288 | 289 | .cl-effect-7 a:hover::before, 290 | .cl-effect-7 a:hover::after, 291 | .cl-effect-7 a:focus::before, 292 | .cl-effect-7 a:focus::after { 293 | -webkit-transform: scale(1); 294 | -moz-transform: scale(1); 295 | transform: scale(1); 296 | } 297 | 298 | .cl-effect-7 a:hover::after, 299 | .cl-effect-7 a:focus::after { 300 | top: 0%; 301 | opacity: 1; 302 | } 303 | 304 | /* Effect 8: border slight translate */ 305 | .cl-effect-8 a { 306 | padding: 10px 20px; 307 | } 308 | 309 | .cl-effect-8 a::before, 310 | .cl-effect-8 a::after { 311 | position: absolute; 312 | top: 0; 313 | left: 0; 314 | width: 100%; 315 | height: 100%; 316 | border: 3px solid #354856; 317 | content: ''; 318 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 319 | -moz-transition: -moz-transform 0.3s, opacity 0.3s; 320 | transition: transform 0.3s, opacity 0.3s; 321 | } 322 | 323 | .cl-effect-8 a::after { 324 | border-color: #fff; 325 | opacity: 0; 326 | -webkit-transform: translateY(-7px) translateX(6px); 327 | -moz-transform: translateY(-7px) translateX(6px); 328 | transform: translateY(-7px) translateX(6px); 329 | } 330 | 331 | .cl-effect-8 a:hover::before, 332 | .cl-effect-8 a:focus::before { 333 | opacity: 0; 334 | -webkit-transform: translateY(5px) translateX(-5px); 335 | -moz-transform: translateY(5px) translateX(-5px); 336 | transform: translateY(5px) translateX(-5px); 337 | } 338 | 339 | .cl-effect-8 a:hover::after, 340 | .cl-effect-8 a:focus::after { 341 | opacity: 1; 342 | -webkit-transform: translateY(0px) translateX(0px); 343 | -moz-transform: translateY(0px) translateX(0px); 344 | transform: translateY(0px) translateX(0px); 345 | } 346 | 347 | /* Effect 9: second text and borders */ 348 | .cl-effect-9 a { 349 | margin: 0 20px; 350 | padding: 18px 20px; 351 | } 352 | 353 | .cl-effect-9 a::before, 354 | .cl-effect-9 a::after { 355 | position: absolute; 356 | top: 0; 357 | left: 0; 358 | width: 100%; 359 | height: 1px; 360 | background: #fff; 361 | content: ''; 362 | opacity: 0.2; 363 | -webkit-transition: opacity 0.3s, height 0.3s; 364 | -moz-transition: opacity 0.3s, height 0.3s; 365 | transition: opacity 0.3s, height 0.3s; 366 | } 367 | 368 | .cl-effect-9 a::after { 369 | top: 100%; 370 | opacity: 0; 371 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 372 | -moz-transition: -moz-transform 0.3s, opacity 0.3s; 373 | transition: transform 0.3s, opacity 0.3s; 374 | -webkit-transform: translateY(-10px); 375 | -moz-transform: translateY(-10px); 376 | transform: translateY(-10px); 377 | } 378 | 379 | .cl-effect-9 a span:first-child { 380 | z-index: 2; 381 | display: block; 382 | font-weight: 300; 383 | } 384 | 385 | .cl-effect-9 a span:last-child { 386 | z-index: 1; 387 | display: block; 388 | padding: 8px 0 0 0; 389 | color: rgba(0,0,0,0.4); 390 | text-shadow: none; 391 | text-transform: none; 392 | font-style: italic; 393 | font-size: 0.75em; 394 | font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; 395 | opacity: 0; 396 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 397 | -moz-transition: -moz-transform 0.3s, opacity 0.3s; 398 | transition: transform 0.3s, opacity 0.3s; 399 | -webkit-transform: translateY(-100%); 400 | -moz-transform: translateY(-100%); 401 | transform: translateY(-100%); 402 | } 403 | 404 | .cl-effect-9 a:hover::before, 405 | .cl-effect-9 a:focus::before { 406 | height: 6px; 407 | } 408 | 409 | .cl-effect-9 a:hover::before, 410 | .cl-effect-9 a:hover::after, 411 | .cl-effect-9 a:focus::before, 412 | .cl-effect-9 a:focus::after { 413 | opacity: 1; 414 | -webkit-transform: translateY(0px); 415 | -moz-transform: translateY(0px); 416 | transform: translateY(0px); 417 | } 418 | 419 | .cl-effect-9 a:hover span:last-child, 420 | .cl-effect-9 a:focus span:last-child { 421 | opacity: 1; 422 | -webkit-transform: translateY(0%); 423 | -moz-transform: translateY(0%); 424 | transform: translateY(0%); 425 | } 426 | 427 | /* Effect 10: reveal, push out */ 428 | .cl-effect-10 { 429 | position: relative; 430 | z-index: 1; 431 | } 432 | 433 | .cl-effect-10 a { 434 | overflow: hidden; 435 | margin: 0 15px; 436 | } 437 | 438 | .cl-effect-10 a span { 439 | display: block; 440 | padding: 10px 20px; 441 | background: #0f7c67; 442 | -webkit-transition: -webkit-transform 0.3s; 443 | -moz-transition: -moz-transform 0.3s; 444 | transition: transform 0.3s; 445 | } 446 | 447 | .cl-effect-10 a::before { 448 | position: absolute; 449 | top: 0; 450 | left: 0; 451 | z-index: -1; 452 | padding: 10px 20px; 453 | width: 100%; 454 | height: 100%; 455 | background: #fff; 456 | color: #0f7c67; 457 | content: attr(data-hover); 458 | -webkit-transition: -webkit-transform 0.3s; 459 | -moz-transition: -moz-transform 0.3s; 460 | transition: transform 0.3s; 461 | -webkit-transform: translateX(-25%); 462 | } 463 | 464 | .cl-effect-10 a:hover span, 465 | .cl-effect-10 a:focus span { 466 | -webkit-transform: translateX(100%); 467 | -moz-transform: translateX(100%); 468 | transform: translateX(100%); 469 | } 470 | 471 | .cl-effect-10 a:hover::before, 472 | .cl-effect-10 a:focus::before { 473 | -webkit-transform: translateX(0%); 474 | -moz-transform: translateX(0%); 475 | transform: translateX(0%); 476 | } 477 | 478 | /* Effect 11: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */ 479 | .cl-effect-11 a { 480 | padding: 10px 0; 481 | border-top: 2px solid #0972b4; 482 | color: #0972b4; 483 | text-shadow: none; 484 | } 485 | 486 | .cl-effect-11 a::before { 487 | position: absolute; 488 | top: 0; 489 | left: 0; 490 | overflow: hidden; 491 | padding: 10px 0; 492 | max-width: 0; 493 | border-bottom: 2px solid #fff; 494 | color: #fff; 495 | content: attr(data-hover); 496 | -webkit-transition: max-width 0.5s; 497 | -moz-transition: max-width 0.5s; 498 | transition: max-width 0.5s; 499 | white-space: nowrap; 500 | } 501 | 502 | .cl-effect-11 a:hover::before, 503 | .cl-effect-11 a:focus::before { 504 | max-width: 100%; 505 | } 506 | 507 | /* Effect 12: circle */ 508 | .cl-effect-12 a::before, 509 | .cl-effect-12 a::after { 510 | position: absolute; 511 | top: 50%; 512 | left: 50%; 513 | width: 100px; 514 | height: 100px; 515 | border: 2px solid rgba(0,0,0,0.1); 516 | border-radius: 50%; 517 | content: ''; 518 | opacity: 0; 519 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 520 | -moz-transition: -moz-transform 0.3s, opacity 0.3s; 521 | transition: transform 0.3s, opacity 0.3s; 522 | -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); 523 | -moz-transform: translateX(-50%) translateY(-50%) scale(0.2); 524 | transform: translateX(-50%) translateY(-50%) scale(0.2); 525 | } 526 | 527 | .cl-effect-12 a::after { 528 | width: 90px; 529 | height: 90px; 530 | border-width: 6px; 531 | -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); 532 | -moz-transform: translateX(-50%) translateY(-50%) scale(0.8); 533 | transform: translateX(-50%) translateY(-50%) scale(0.8); 534 | } 535 | 536 | .cl-effect-12 a:hover::before, 537 | .cl-effect-12 a:hover::after, 538 | .cl-effect-12 a:focus::before, 539 | .cl-effect-12 a:focus::after { 540 | opacity: 1; 541 | -webkit-transform: translateX(-50%) translateY(-50%) scale(1); 542 | -moz-transform: translateX(-50%) translateY(-50%) scale(1); 543 | transform: translateX(-50%) translateY(-50%) scale(1); 544 | } 545 | 546 | /* Effect 13: three circles */ 547 | .cl-effect-13 a { 548 | -webkit-transition: color 0.3s; 549 | -moz-transition: color 0.3s; 550 | transition: color 0.3s; 551 | } 552 | 553 | .cl-effect-13 a::before { 554 | position: absolute; 555 | top: 100%; 556 | left: 50%; 557 | color: transparent; 558 | content: '•'; 559 | text-shadow: 0 0 transparent; 560 | font-size: 1.2em; 561 | -webkit-transition: text-shadow 0.3s, color 0.3s; 562 | -moz-transition: text-shadow 0.3s, color 0.3s; 563 | transition: text-shadow 0.3s, color 0.3s; 564 | -webkit-transform: translateX(-50%); 565 | -moz-transform: translateX(-50%); 566 | transform: translateX(-50%); 567 | pointer-events: none; 568 | } 569 | 570 | .cl-effect-13 a:hover::before, 571 | .cl-effect-13 a:focus::before { 572 | color: #fff; 573 | text-shadow: 10px 0 #fff, -10px 0 #fff; 574 | } 575 | 576 | .cl-effect-13 a:hover, 577 | .cl-effect-13 a:focus { 578 | color: #ba7700; 579 | } 580 | 581 | /* Effect 14: border switch */ 582 | .cl-effect-14 a { 583 | padding: 0 20px; 584 | height: 45px; 585 | line-height: 45px; 586 | } 587 | 588 | .cl-effect-14 a::before, 589 | .cl-effect-14 a::after { 590 | position: absolute; 591 | width: 45px; 592 | height: 2px; 593 | background: #fff; 594 | content: ''; 595 | opacity: 0.2; 596 | -webkit-transition: all 0.3s; 597 | -moz-transition: all 0.3s; 598 | transition: all 0.3s; 599 | pointer-events: none; 600 | } 601 | 602 | .cl-effect-14 a::before { 603 | top: 0; 604 | left: 0; 605 | -webkit-transform: rotate(90deg); 606 | -moz-transform: rotate(90deg); 607 | transform: rotate(90deg); 608 | -webkit-transform-origin: 0 0; 609 | -moz-transform-origin: 0 0; 610 | transform-origin: 0 0; 611 | } 612 | 613 | .cl-effect-14 a::after { 614 | right: 0; 615 | bottom: 0; 616 | -webkit-transform: rotate(90deg); 617 | -moz-transform: rotate(90deg); 618 | transform: rotate(90deg); 619 | -webkit-transform-origin: 100% 0; 620 | -moz-transform-origin: 100% 0; 621 | transform-origin: 100% 0; 622 | } 623 | 624 | .cl-effect-14 a:hover::before, 625 | .cl-effect-14 a:hover::after, 626 | .cl-effect-14 a:focus::before, 627 | .cl-effect-14 a:focus::after { 628 | opacity: 1; 629 | } 630 | 631 | .cl-effect-14 a:hover::before, 632 | .cl-effect-14 a:focus::before { 633 | left: 50%; 634 | -webkit-transform: rotate(0deg) translateX(-50%); 635 | -moz-transform: rotate(0deg) translateX(-50%); 636 | transform: rotate(0deg) translateX(-50%); 637 | } 638 | 639 | .cl-effect-14 a:hover::after, 640 | .cl-effect-14 a:focus::after { 641 | right: 50%; 642 | -webkit-transform: rotate(0deg) translateX(50%); 643 | -moz-transform: rotate(0deg) translateX(50%); 644 | transform: rotate(0deg) translateX(50%); 645 | } 646 | 647 | /* Effect 15: scale down, reveal */ 648 | .cl-effect-15 a { 649 | color: rgba(0,0,0,0.2); 650 | font-weight: 700; 651 | text-shadow: none; 652 | } 653 | 654 | .cl-effect-15 a::before { 655 | color: #fff; 656 | content: attr(data-hover); 657 | position: absolute; 658 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 659 | -moz-transition: -moz-transform 0.3s, opacity 0.3s; 660 | transition: transform 0.3s, opacity 0.3s; 661 | } 662 | 663 | .cl-effect-15 a:hover::before, 664 | .cl-effect-15 a:focus::before { 665 | -webkit-transform: scale(0.9); 666 | -moz-transform: scale(0.9); 667 | transform: scale(0.9); 668 | opacity: 0; 669 | } 670 | 671 | /* Effect 16: fall down */ 672 | .cl-effect-16 a { 673 | color: #6f8686; 674 | text-shadow: 0 0 1px rgba(111,134,134,0.3); 675 | } 676 | 677 | .cl-effect-16 a::before { 678 | color: #fff; 679 | content: attr(data-hover); 680 | position: absolute; 681 | opacity: 0; 682 | text-shadow: 0 0 1px rgba(255,255,255,0.3); 683 | -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); 684 | -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); 685 | transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); 686 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 687 | -moz-transition: -moz-transform 0.3s, opacity 0.3s; 688 | transition: transform 0.3s, opacity 0.3s; 689 | pointer-events: none; 690 | } 691 | 692 | .cl-effect-16 a:hover::before, 693 | .cl-effect-16 a:focus::before { 694 | -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); 695 | -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); 696 | transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); 697 | opacity: 1; 698 | } 699 | 700 | /* Effect 17: move up fade out, push border */ 701 | .cl-effect-17 a { 702 | color: #10649b; 703 | text-shadow: none; 704 | padding: 10px 0; 705 | } 706 | 707 | .cl-effect-17 a::before { 708 | color: #fff; 709 | text-shadow: 0 0 1px rgba(255,255,255,0.3); 710 | content: attr(data-hover); 711 | position: absolute; 712 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 713 | -moz-transition: -moz-transform 0.3s, opacity 0.3s; 714 | transition: transform 0.3s, opacity 0.3s; 715 | pointer-events: none; 716 | } 717 | 718 | .cl-effect-17 a::after { 719 | content: ''; 720 | position: absolute; 721 | left: 0; 722 | bottom: 0; 723 | width: 100%; 724 | height: 2px; 725 | background: #fff; 726 | opacity: 0; 727 | -webkit-transform: translateY(5px); 728 | -moz-transform: translateY(5px); 729 | transform: translateY(5px); 730 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 731 | -moz-transition: -moz-transform 0.3s, opacity 0.3s; 732 | transition: transform 0.3s, opacity 0.3s; 733 | pointer-events: none; 734 | } 735 | 736 | .cl-effect-17 a:hover::before, 737 | .cl-effect-17 a:focus::before { 738 | opacity: 0; 739 | -webkit-transform: translateY(-2px); 740 | -moz-transform: translateY(-2px); 741 | transform: translateY(-2px); 742 | } 743 | 744 | .cl-effect-17 a:hover::after, 745 | .cl-effect-17 a:focus::after { 746 | opacity: 1; 747 | -webkit-transform: translateY(0px); 748 | -moz-transform: translateY(0px); 749 | transform: translateY(0px); 750 | } 751 | 752 | /* Effect 18: cross */ 753 | .cl-effect-18 { 754 | position: relative; 755 | z-index: 1; 756 | } 757 | 758 | .cl-effect-18 a { 759 | padding: 0 5px; 760 | color: #b4770d; 761 | font-weight: 700; 762 | -webkit-transition: color 0.3s; 763 | -moz-transition: color 0.3s; 764 | transition: color 0.3s; 765 | } 766 | 767 | .cl-effect-18 a::before, 768 | .cl-effect-18 a::after { 769 | position: absolute; 770 | width: 100%; 771 | left: 0; 772 | top: 50%; 773 | height: 2px; 774 | margin-top: -1px; 775 | background: #b4770d; 776 | content: ''; 777 | z-index: -1; 778 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 779 | -moz-transition: -moz-transform 0.3s, opacity 0.3s; 780 | transition: transform 0.3s, opacity 0.3s; 781 | pointer-events: none; 782 | } 783 | 784 | .cl-effect-18 a::before { 785 | -webkit-transform: translateY(-20px); 786 | -moz-transform: translateY(-20px); 787 | transform: translateY(-20px); 788 | } 789 | 790 | .cl-effect-18 a::after { 791 | -webkit-transform: translateY(20px); 792 | -moz-transform: translateY(20px); 793 | transform: translateY(20px); 794 | } 795 | 796 | .cl-effect-18 a:hover, 797 | .cl-effect-18 a:focus { 798 | color: #fff; 799 | } 800 | 801 | .cl-effect-18 a:hover::before, 802 | .cl-effect-18 a:hover::after, 803 | .cl-effect-18 a:focus::before, 804 | .cl-effect-18 a:focus::after { 805 | opacity: 0.7; 806 | } 807 | 808 | .cl-effect-18 a:hover::before, 809 | .cl-effect-18 a:focus::before { 810 | -webkit-transform: rotate(45deg); 811 | -moz-transform: rotate(45deg); 812 | transform: rotate(45deg); 813 | } 814 | 815 | .cl-effect-18 a:hover::after, 816 | .cl-effect-18 a:focus::after { 817 | -webkit-transform: rotate(-45deg); 818 | -moz-transform: rotate(-45deg); 819 | transform: rotate(-45deg); 820 | } 821 | 822 | /* Effect 19: 3D side */ 823 | .cl-effect-19 a { 824 | line-height: 2em; 825 | margin: 15px; 826 | -webkit-perspective: 800px; 827 | -moz-perspective: 800px; 828 | perspective: 800px; 829 | width: 200px; 830 | } 831 | 832 | .cl-effect-19 a span { 833 | position: relative; 834 | display: inline-block; 835 | width: 100%; 836 | padding: 0 14px; 837 | background: #e35041; 838 | -webkit-transition: -webkit-transform 0.4s, background 0.4s; 839 | -moz-transition: -moz-transform 0.4s, background 0.4s; 840 | transition: transform 0.4s, background 0.4s; 841 | -webkit-transform-style: preserve-3d; 842 | -moz-transform-style: preserve-3d; 843 | transform-style: preserve-3d; 844 | -webkit-transform-origin: 50% 50% -100px; 845 | -moz-transform-origin: 50% 50% -100px; 846 | transform-origin: 50% 50% -100px; 847 | } 848 | 849 | .csstransforms3d .cl-effect-19 a span::before { 850 | position: absolute; 851 | top: 0; 852 | left: 100%; 853 | width: 100%; 854 | height: 100%; 855 | background: #b53a2d; 856 | content: attr(data-hover); 857 | -webkit-transition: background 0.4s; 858 | -moz-transition: background 0.4s; 859 | transition: background 0.4s; 860 | -webkit-transform: rotateY(90deg); 861 | -moz-transform: rotateY(90deg); 862 | transform: rotateY(90deg); 863 | -webkit-transform-origin: 0 50%; 864 | -moz-transform-origin: 0 50%; 865 | transform-origin: 0 50%; 866 | pointer-events: none; 867 | } 868 | 869 | .cl-effect-19 a:hover span, 870 | .cl-effect-19 a:focus span { 871 | background: #b53a2d; 872 | -webkit-transform: rotateY(-90deg); 873 | -moz-transform: rotateY(-90deg); 874 | transform: rotateY(-90deg); 875 | } 876 | 877 | .csstransforms3d .cl-effect-19 a:hover span::before, 878 | .csstransforms3d .cl-effect-19 a:focus span::before { 879 | background: #ef5e50; 880 | } 881 | 882 | /* Effect 20: 3D side */ 883 | .cl-effect-20 a { 884 | line-height: 2em; 885 | -webkit-perspective: 800px; 886 | -moz-perspective: 800px; 887 | perspective: 800px; 888 | } 889 | 890 | .cl-effect-20 a span { 891 | position: relative; 892 | display: inline-block; 893 | padding: 3px 15px 0; 894 | background: #587285; 895 | box-shadow: inset 0 3px #2f4351; 896 | -webkit-transition: background 0.6s; 897 | -moz-transition: background 0.6s; 898 | transition: background 0.6s; 899 | -webkit-transform-origin: 50% 0; 900 | -moz-transform-origin: 50% 0; 901 | transform-origin: 50% 0; 902 | -webkit-transform-style: preserve-3d; 903 | -moz-transform-style: preserve-3d; 904 | transform-style: preserve-3d; 905 | -webkit-transform-origin: 0% 50%; 906 | -moz-transform-origin: 0% 50%; 907 | transform-origin: 0% 50%; 908 | } 909 | 910 | .cl-effect-20 a span::before { 911 | position: absolute; 912 | top: 0; 913 | left: 0; 914 | width: 100%; 915 | height: 100%; 916 | background: #fff; 917 | color: #2f4351; 918 | content: attr(data-hover); 919 | -webkit-transform: rotateX(270deg); 920 | -moz-transform: rotateX(270deg); 921 | transform: rotateX(270deg); 922 | -webkit-transition: -webkit-transform 0.6s; 923 | -moz-transition: -moz-transform 0.6s; 924 | transition: transform 0.6s; 925 | -webkit-transform-origin: 0 0; 926 | -moz-transform-origin: 0 0; 927 | transform-origin: 0 0; 928 | pointer-events: none; 929 | } 930 | 931 | .cl-effect-20 a:hover span, 932 | .cl-effect-20 a:focus span { 933 | background: #2f4351; 934 | } 935 | 936 | .cl-effect-20 a:hover span::before, 937 | .cl-effect-20 a:focus span::before { 938 | -webkit-transform: rotateX(10deg); 939 | -moz-transform: rotateX(10deg); 940 | transform: rotateX(10deg); 941 | } 942 | 943 | /* Effect 21: borders slight translate */ 944 | .cl-effect-21 a { 945 | padding: 10px; 946 | color: #237546; 947 | font-weight: 700; 948 | text-shadow: none; 949 | -webkit-transition: color 0.3s; 950 | -moz-transition: color 0.3s; 951 | transition: color 0.3s; 952 | } 953 | 954 | .cl-effect-21 a::before, 955 | .cl-effect-21 a::after { 956 | position: absolute; 957 | left: 0; 958 | width: 100%; 959 | height: 2px; 960 | background: #fff; 961 | content: ''; 962 | opacity: 0; 963 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 964 | -moz-transition: opacity 0.3s, -moz-transform 0.3s; 965 | transition: opacity 0.3s, transform 0.3s; 966 | -webkit-transform: translateY(-10px); 967 | -moz-transform: translateY(-10px); 968 | transform: translateY(-10px); 969 | } 970 | 971 | .cl-effect-21 a::before { 972 | top: 0; 973 | -webkit-transform: translateY(-10px); 974 | -moz-transform: translateY(-10px); 975 | transform: translateY(-10px); 976 | } 977 | 978 | .cl-effect-21 a::after { 979 | bottom: 0; 980 | -webkit-transform: translateY(10px); 981 | -moz-transform: translateY(10px); 982 | transform: translateY(10px); 983 | } 984 | 985 | .cl-effect-21 a:hover, 986 | .cl-effect-21 a:focus { 987 | color: #fff; 988 | } 989 | 990 | .cl-effect-21 a:hover::before, 991 | .cl-effect-21 a:focus::before, 992 | .cl-effect-21 a:hover::after, 993 | .cl-effect-21 a:focus::after { 994 | opacity: 1; 995 | -webkit-transform: translateY(0px); 996 | -moz-transform: translateY(0px); 997 | transform: translateY(0px); 998 | } 999 | --------------------------------------------------------------------------------