"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4820],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return p}});var a=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,o=function(e,t){if(null==e)return{};var n,a,o={},s=Object.keys(e);for(a=0;a<s.length;a++)n=s[a],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(a=0;a<s.length;a++)n=s[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=a.createContext({}),i=function(e){var t=a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},u=function(e){var t=i(e.components);return a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,s=e.originalType,c=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),d=i(n),p=o,b=d["".concat(c,".").concat(p)]||d[p]||m[p]||s;return n?a.createElement(b,r(r({ref:t},u),{},{components:n})):a.createElement(b,r({ref:t},u))}));function p(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var s=n.length,r=new Array(s);r[0]=d;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:o,r[1]=l;for(var i=2;i<s;i++)r[i]=n[i];return a.createElement.apply(null,r)}return a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},2695:function(e,t,n){n.d(t,{Z:function(){return l}});var a=n(7462),o=n(3366),s=n(7294),r=["isBad","isGood","children","disableFullscreen","limitWidth"];function l(e){var t=e.isBad,n=e.isGood,l=e.children,c=e.disableFullscreen,i=e.limitWidth,u=(0,o.Z)(e,r),m=(0,s.useState)(!1),d=m[0],p=m[1];return s.createElement("div",{className:"preview-box-wrapper",style:i?{width:i,display:"table",margin:"0 auto"}:{}},!c&&s.createElement("button",{"aria-label":d?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var t=e.target.closest(".preview-box-wrapper");d?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():t.requestFullscreen?t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),p(!d)}},d?s.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},s.createElement("path",{d:"M19.707 18.293a1 1 0 01-1.414 1.414L16 17.414V18a1 1 0 01-2 0v-3a1 1 0 011-1h3a1 1 0 010 2h-.586zM9 14H6a1 1 0 000 2h.586l-2.293 2.293a1 1 0 001.414 1.414L8 17.414V18a1 1 0 002 0v-3a1 1 0 00-1-1zm0-9a1 1 0 00-1 1v.586L5.707 4.293a1 1 0 00-1.414 1.414L6.586 8H6a1 1 0 000 2h3a1 1 0 001-1V6a1 1 0 00-1-1zm6 5h3a1 1 0 000-2h-.586l2.293-2.293a1 1 0 00-1.414-1.414L16 6.586V6a1 1 0 00-2 0v3a1 1 0 001 1z"})):s.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},s.createElement("path",{d:"M54.347 57.882A8.96 8.96 0 0150 59a8.96 8.96 0 01-4.347-1.118L40.736 62.8c-.38.38-.257.701.29.701h.98A2.503 2.503 0 0144.5 66c0 1.39-1.122 2.5-2.507 2.5h-7.986a2.505 2.505 0 01-2.507-2.507v-7.986A2.502 2.502 0 0134 55.5a2.49 2.49 0 012.5 2.493v.98c0 .547.314.678.7.29l4.918-4.916A8.96 8.96 0 0141 50a8.96 8.96 0 011.118-4.347L37.2 40.736c-.38-.38-.701-.257-.701.29v.98A2.503 2.503 0 0134 44.5c-1.39 0-2.5-1.122-2.5-2.507v-7.986a2.505 2.505 0 012.507-2.507h7.986A2.502 2.502 0 0144.5 34a2.49 2.49 0 01-2.493 2.5h-.98c-.547 0-.678.314-.29.7l4.916 4.918A8.96 8.96 0 0150 41a8.96 8.96 0 014.347 1.118l4.917-4.917c.38-.38.257-.701-.29-.701h-.98A2.503 2.503 0 0155.5 34c0-1.39 1.122-2.5 2.507-2.5h7.986a2.505 2.505 0 012.507 2.507v7.986A2.502 2.502 0 0166 44.5a2.49 2.49 0 01-2.5-2.493v-.98c0-.547-.314-.678-.7-.29l-4.918 4.916A8.96 8.96 0 0159 50a8.96 8.96 0 01-1.118 4.347l4.917 4.917c.38.38.701.257.701-.29v-.98A2.503 2.503 0 0166 55.5c1.39 0 2.5 1.122 2.5 2.507v7.986a2.505 2.505 0 01-2.507 2.507h-7.986A2.502 2.502 0 0155.5 66a2.49 2.49 0 012.493-2.5h.98c.547 0 .678-.314.29-.7l-4.916-4.918zM50 54a4 4 0 100-8 4 4 0 000 8z"}))),t&&s.createElement("div",{className:"is-bad-example style-red"},s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},s.createElement("path",{d:"M3.3 12.7c.2.2.4.3.7.3s.5-.1.7-.3L8 9.4l3.3 3.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L9.4 8l3.3-3.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L8 6.6 4.7 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L6.6 8l-3.3 3.3c-.4.4-.4 1 0 1.4z"}))),n&&s.createElement("div",{className:"is-good-example style-green"},s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},s.createElement("path",{d:"M5.056 15.04a1.5 1.5 0 002.217-.119l10.17-12.476A1.5 1.5 0 0015.118.55L6.007 11.758l-3.453-3.41a1.5 1.5 0 10-2.109 2.133l4.611 4.56"}))),s.createElement("iframe",(0,a.Z)({width:"100%",className:"docus-preview-box"+(d?" is-fullscreen":""),srcDoc:l},u)))}},4192:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return c},contentTitle:function(){return i},metadata:function(){return u},toc:function(){return m},default:function(){return p}});var a=n(7462),o=n(3366),s=(n(7294),n(3905)),r=n(2695),l=["components"],c={title:"Two-layer button",sidebar_position:2},i=void 0,u={unversionedId:"components/buttons/two-layer-button",id:"components/buttons/two-layer-button",isDocsHomePage:!1,title:"Two-layer button",description:"This is a kind of button that uses the overlay layer concept and shows secondary text on hover/focus.",source:"@site/docs/components/buttons/two-layer-button.mdx",sourceDirName:"components/buttons",slug:"/components/buttons/two-layer-button",permalink:"/docs/components/buttons/two-layer-button",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/components/buttons/two-layer-button.mdx",tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"Two-layer button",sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Buttons",permalink:"/docs/components/buttons/button"},next:{title:"Button group",permalink:"/docs/components/buttons/button-group"}},m=[{value:"Custom reveal animation",id:"custom-reveal-animation",children:[],level:2}],d={toc:m};function p(e){var t=e.components,n=(0,o.Z)(e,l);return(0,s.kt)("wrapper",(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"This is a kind of button that uses the ",(0,s.kt)("a",{parentName:"p",href:"/docs/helpers/overlay-layer"},"overlay layer")," concept and shows secondary text on hover/focus."),(0,s.kt)("p",null,"Here is an example:"),(0,s.kt)(r.Z,{height:"120px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Two layers button</title> </head> <body> <div class="flex-center" style="flex-wrap: wrap"> <button class="button two-layer-button style-orange size-lg"> I am a button <span class="secondary-text">Hello dear</span> </button> <button class="button two-layer-button style-green size-lg"> Buy me a coffee <span class="secondary-text"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="50 -20 600 600"> <path d="M350 437.36c-30.801 0-59.359-12.32-80.641-34.16h-51.52l12.879 123.2c1.121 11.199 10.641 19.602 21.84 19.602h195.44c11.199 0 20.719-8.398 21.84-19.602l12.879-123.2h-51.52c-21.84 21.84-50.398 34.16-81.199 34.16zM509.04 103.04H190.96c-2.8 0-4.48 2.238-4.48 5.04l14.559 137.76h68.32c21.28-21.84 49.84-34.16 80.64-34.16s59.36 12.32 80.642 34.16h68.32l14.559-137.76c0-2.798-1.68-5.04-4.481-5.04zM191.52 80.078h317.52c2.8 0 5.04-2.8 4.48-5.04l-6.16-29.12c-.558-2.238-2.238-3.36-4.48-3.36h-49.281L446.88 21.84c-1.68-4.481-5.602-7.84-10.641-7.84h-172.48c-4.48 0-8.96 2.8-10.641 7.84l-6.719 20.719h-49.28c-2.24 0-3.923 1.68-4.481 3.359l-6.16 29.12c.003 2.243 2.242 5.04 5.043 5.04z"></path> <path d="M350 235.2c-28.559 0-53.762 13.441-70 34.16h-76.16l11.762 110.32H280c16.238 20.719 42 34.16 70 34.16 28.559 0 53.762-13.441 70-34.16h64.398l11.762-110.32H420c-16.238-20.719-41.441-34.16-70-34.16z"></path> </svg> </span> </button> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<button class="button two-layer-button style-orange size-lg">\n  I am a button\n  <span class="secondary-text">Hello dear</span>\n</button>\n\n<button class="button two-layer-button style-green size-lg">\n  Buy me a coffee\n  <span class="secondary-text">\n    \x3c!-- SVG HERE --\x3e\n  </span>\n</button>\n')),(0,s.kt)("h2",{id:"custom-reveal-animation"},"Custom reveal animation"),(0,s.kt)("p",null,"You can change the animation when the button has hovered and the ",(0,s.kt)("inlineCode",{parentName:"p"},".secondary-text")," is going to be shown. Just change the ",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__two-layer-button-animation-show")," CSS variable to a new animation shorthand."),(0,s.kt)(r.Z,{height:"110px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Two layers button</title> </head> <style> @keyframes secondary-layer-slidedown { 0%{ transform: translateY(-1em) } 100%{ transform: translateY(0) } } .custom-button-1{ --flatify__two-layer-button-animation-show: secondary-layer-slidedown 0.3s 0.1s ease; } @keyframes secondary-layer-blur { 0%{ transform: scale(1.5); filter: blur(0.4em); } 100%{ transform: scale(1); filter: blur(0); } } .custom-button-2{ --flatify__two-layer-button-animation-show: secondary-layer-blur 0.5s 0.1s ease; } @keyframes secondary-layer-letters { 0%{ letter-spacing: 0.25em; } 100%{ letter-spacing: 0; } } .custom-button-3{ --flatify__two-layer-button-animation-show: secondary-layer-letters 0.3s 0.1s ease; } </style> <body> <div class="flex-center" style="flex-wrap: wrap"> <button class="button two-layer-button custom-button-1 style-blue"> I am a button <span class="secondary-text">Hello dear</span> </button> <button class="button two-layer-button custom-button-2 style-blue"> I am a button <span class="secondary-text">Hello dear</span> </button> <button class="button two-layer-button custom-button-3 style-blue"> I am a button <span class="secondary-text">Hello dear</span> </button> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("div",{className:"admonition admonition-success alert alert--success"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,s.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"Delay for custom animations")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"Because of the secondary layer fade-in animation as default, it is better to set a delay of ",(0,s.kt)("inlineCode",{parentName:"p"},"100ms")," for your custom animation."))),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<button class="button two-layer-button custom-button-1 style-blue">\n  I am a button\n  <span class="secondary-text">Hello dear</span>\n</button>\n\n<button class="button two-layer-button custom-button-2 style-blue">\n  I am a button\n  <span class="secondary-text">Hello dear</span>\n</button>\n\n<button class="button two-layer-button custom-button-3 style-blue">\n  I am a button\n  <span class="secondary-text">Hello dear</span>\n</button>\n')),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},"/* Slide down */\n@keyframes secondary-layer-slidedown {\n  0% {\n    transform: translateY(-1em);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n.custom-button-1 {\n  --flatify__two-layer-button-animation-show: secondary-layer-slideup 0.3s 0.1s ease;\n}\n\n/* Blur */\n@keyframes secondary-layer-blur {\n  0% {\n    transform: scale(1.5);\n    filter: blur(0.4em);\n  }\n  100% {\n    transform: scale(1);\n    filter: blur(0);\n  }\n}\n\n.custom-button-2 {\n  --flatify__two-layer-button-animation-show: secondary-layer-blur 0.5s 0.1s ease;\n}\n\n/* Letter spacing */\n@keyframes secondary-layer-letters {\n  0% {\n    letter-spacing: 0.25em;\n  }\n  100% {\n    letter-spacing: 0;\n  }\n}\n\n.custom-button-3 {\n  --flatify__two-layer-button-animation-show: secondary-layer-letters 0.3s 0.1s ease;\n}\n")))}p.isMDXComponent=!0}}]);