Title

From: nael Date: Tue, 15 Jan 2019 14:25:37 +0000 (+0100) Subject: wait #2509 @2 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=3929b93bfeba84786c41530d1f484134e9fe2f7f;p=Animations.git wait #2509 @2 --- diff --git a/Fluidbook-presentation-btn/p29/font.woff b/Fluidbook-presentation-btn/p29/font.woff new file mode 100644 index 0000000..8a054ad Binary files /dev/null and b/Fluidbook-presentation-btn/p29/font.woff differ diff --git a/Fluidbook-presentation-btn/p29/index.html b/Fluidbook-presentation-btn/p29/index.html new file mode 100644 index 0000000..51fdf2d --- /dev/null +++ b/Fluidbook-presentation-btn/p29/index.html @@ -0,0 +1,22 @@ + + + + + Title + + + +

+ +

+ + + +

+ + + + \ No newline at end of file diff --git a/Fluidbook-presentation-btn/p29/main.js b/Fluidbook-presentation-btn/p29/main.js new file mode 100644 index 0000000..30d064d --- /dev/null +++ b/Fluidbook-presentation-btn/p29/main.js @@ -0,0 +1,3 @@ +function btnClick() { + parent.fluidbook.links.triggerLinkById('b17be8d600'); +} \ No newline at end of file diff --git a/Fluidbook-presentation-btn/p29/p29.zip b/Fluidbook-presentation-btn/p29/p29.zip new file mode 100644 index 0000000..f2b288d Binary files /dev/null and b/Fluidbook-presentation-btn/p29/p29.zip differ diff --git a/Fluidbook-presentation-btn/p29/style.css b/Fluidbook-presentation-btn/p29/style.css new file mode 100644 index 0000000..fbc3458 --- /dev/null +++ b/Fluidbook-presentation-btn/p29/style.css @@ -0,0 +1,93 @@ +* { + margin: 0; + padding: 0; } + +#canvas { + display: none; + position: absolute; } + +@font-face { + font-family: font; + src: url("font.woff"); } +.container { + width: 160px; + height: 43px; } + +.btn { + width: 160px; + height: 43px; + position: absolute; + border: 0; + background-image: linear-gradient(90deg, #41a6c9 0%, #63c2b7 100%); + text-transform: uppercase; + color: white; + font-size: 11px; + transition: all 300ms ease-out; + -webkit-transition: all 300ms ease-out; + cursor: pointer; + font-family: font; + font-weight: 600; + box-shadow: 2px 4px 10px -1px rgba(0, 0, 0, 0.37); } + .btn::before { + position: absolute; + content: ""; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-image: linear-gradient(to bottom, #ffffff, #ffffff); + z-index: -1; + -webkit-transition: all 300ms ease-out; + opacity: 0; } + .btn::after { + position: absolute; + content: ""; + top: 0; + right: 0; + bottom: 0; + left: 0; + border: 2px solid; + border-image: linear-gradient(to left, #41A6C9 0%, #63C2B7 100%); + border-image-slice: 1; + -webkit-transition: all 300ms ease-out; + z-index: 3; + opacity: 0; } + .btn:hover { + color: #63C2B7; + -webkit-transition: all 300ms ease-out; + z-index: 2; } + .btn:hover::before { + opacity: 1; } + .btn:hover::after { + opacity: 1; } + +.arrow { + position: absolute; + width: 11px; + height: 1px; + background: white; + top: 17px; + left: 134px; + transform: rotate(45deg); + z-index: 55; + -webkit-transition: all 300ms ease-out; } + .arrow::before { + content: ""; + position: absolute; + width: 11px; + height: 1px; + transform: rotate(-90deg); + background: white; + top: 5px; + left: 5px; + -webkit-transition: all 300ms ease-out; } + +.btn .txt { + position: relative; + left: -9px; } +.btn:hover .arrow { + background: #63C2B7; } + .btn:hover .arrow::before { + background: #63C2B7; } + +/*# sourceMappingURL=style.css.map */ diff --git a/Fluidbook-presentation-btn/p29/style.css.map b/Fluidbook-presentation-btn/p29/style.css.map new file mode 100644 index 0000000..a4e49b8 --- /dev/null +++ b/Fluidbook-presentation-btn/p29/style.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAA,CAAC;EACC,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAKZ,OAAO;EACL,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;;;EAElB,WAAW,EAAE,IAAI;EACjB,GAAG,EAAE,gBAAgB;AACvB,UAAU;EACR,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;;AACd,IAAI;EACF,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,CAAC;EACT,gBAAgB,EAlBP,gDAAsE;EAmB/E,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,IAAI;EACf,UAAU,EAAG,kBAAkB;EAC/B,kBAAkB,EAAG,kBAAkB;EACvC,MAAM,EAAE,OAAO;EACf,WAAW,EAAE,IAAI;EACjB,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,qCAAqC;EACjD,YAAS;IACP,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,EAAE;IACX,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,gBAAgB,EAAE,4CAA4C;IAC9D,OAAO,EAAE,EAAE;IACX,kBAAkB,EAAE,kBAAkB;IACtC,OAAO,EAAE,CAAC;EACZ,WAAQ;IACN,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,EAAE;IACX,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,SAAS;IACjB,YAAY,EAAE,kDAAkD;IAChE,kBAAkB,EAAE,CAAC;IACrB,kBAAkB,EAAE,kBAAkB;IACtC,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;EACZ,UAAO;IACL,KAAK,EAlDD,OAAO;IAmDX,kBAAkB,EAAE,kBAAkB;IACtC,OAAO,EAAE,CAAC;IAEV,kBAAS;MACP,OAAO,EAAE,CAAC;IACZ,iBAAQ;MACN,OAAO,EAAE,CAAC;;AAChB,MAAM;EACJ,QAAQ,EAAE,QAAQ;EAClB,KAAK,EA9DO,IAAI;EA+DhB,MAAM,EA9DO,GAAG;EA+DhB,UAAU,EAAE,KAAK;EACjB,GAAG,EAAE,IAAI;EACT,IAAI,EAAE,KAAK;EACX,SAAS,EAAE,aAAa;EACxB,OAAO,EAAE,EAAE;EACX,kBAAkB,EAAE,kBAAkB;EAEtC,cAAS;IACP,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,QAAQ;IAClB,KAAK,EA1EK,IAAI;IA2Ed,MAAM,EA1EK,GAAG;IA2Ed,SAAS,EAAE,cAAc;IACzB,UAAU,EAAE,KAAK;IACjB,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,GAAG;IACT,kBAAkB,EAAE,kBAAkB;;AAExC,SAAI;EACF,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,IAAI;AAEV,iBAAM;EACJ,UAAU,EArFR,OAAO;EAsFT,yBAAS;IACP,UAAU,EAvFV,OAAO", +"sources": ["style.sass"], +"names": [], +"file": "style.css" +} \ No newline at end of file diff --git a/Fluidbook-presentation-btn/p29/style.sass b/Fluidbook-presentation-btn/p29/style.sass new file mode 100644 index 0000000..7848357 --- /dev/null +++ b/Fluidbook-presentation-btn/p29/style.sass @@ -0,0 +1,94 @@ +* + margin: 0 + padding: 0 +$gradient: linear-gradient(90deg, rgba(65,166,201,1) 0%, rgba(99,194,183,1) 100%) +$width-arrow: 11px +$height-arrow: 1px +$color: #63C2B7 +#canvas + display: none + position: absolute +@font-face + font-family: font + src: url("font.woff") +.container + width: 160px + height: 43px +.btn + width: 160px + height: 43px + position: absolute + border: 0 + background-image: $gradient + text-transform: uppercase + color: white + font-size: 11px + transition: all 300ms ease-out + -webkit-transition: all 300ms ease-out + cursor: pointer + font-family: font + font-weight: 600 + box-shadow: 2px 4px 10px -1px rgba(0, 0, 0, 0.37) + &::before + position: absolute + content: "" + top: 0 + right: 0 + bottom: 0 + left: 0 + background-image: linear-gradient(to bottom, #ffffff,#ffffff ) + z-index: -1 + -webkit-transition: all 300ms ease-out + opacity: 0 + &::after + position: absolute + content: "" + top: 0 + right: 0 + bottom: 0 + left: 0 + border: 2px solid + border-image: linear-gradient(to left, #41A6C9 0%, #63C2B7 100%) + border-image-slice: 1 + -webkit-transition: all 300ms ease-out + z-index: 3 + opacity: 0 + &:hover + color: $color + -webkit-transition: all 300ms ease-out + z-index: 2 + //font-size: 10px + &::before + opacity: 1 + &::after + opacity: 1 +.arrow + position: absolute + width: $width-arrow + height: $height-arrow + background: white + top: 17px + left: 134px + transform: rotate(45deg) + z-index: 55 + -webkit-transition: all 300ms ease-out + //pointer-events: none + &::before + content: '' + position: absolute + width: $width-arrow + height: $height-arrow + transform: rotate(-90deg) + background: white + top: 5px + left: 5px + -webkit-transition: all 300ms ease-out +.btn + .txt + position: relative + left: -9px + &:hover + .arrow + background: $color + &::before + background: $color \ No newline at end of file