/*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { padding: 12px 10px 4px 53px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger-box { width: 30px; height: 20px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 35px; height: 2px; background-color: #fff; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } /* * 3DX */ .hamburger--3dx .hamburger-box { perspective: 80px; } .hamburger--3dx .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx.is-active .hamburger-inner { background-color: transparent; transform: rotateY(180deg); } .hamburger--3dx.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DX Reverse */ .hamburger--3dx-r .hamburger-box { perspective: 80px; } .hamburger--3dx-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r.is-active .hamburger-inner { background-color: transparent; transform: rotateY(-180deg); } .hamburger--3dx-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DY */ .hamburger--3dy .hamburger-box { perspective: 80px; } .hamburger--3dy .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy.is-active .hamburger-inner { background-color: transparent; transform: rotateX(-180deg); } .hamburger--3dy.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DY Reverse */ .hamburger--3dy-r .hamburger-box { perspective: 80px; } .hamburger--3dy-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r.is-active .hamburger-inner { background-color: transparent; transform: rotateX(180deg); } .hamburger--3dy-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DXY */ .hamburger--3dxy .hamburger-box { perspective: 80px; } .hamburger--3dxy .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy.is-active .hamburger-inner { background-color: transparent; transform: rotateX(180deg) rotateY(180deg); } .hamburger--3dxy.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DXY Reverse */ .hamburger--3dxy-r .hamburger-box { perspective: 80px; } .hamburger--3dxy-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r.is-active .hamburger-inner { background-color: transparent; transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); } .hamburger--3dxy-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * Arrow */ .hamburger--arrow.is-active .hamburger-inner::before { transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrow.is-active .hamburger-inner::after { transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Arrow Right */ .hamburger--arrow-r.is-active .hamburger-inner::before { transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrow-r.is-active .hamburger-inner::after { transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Alt */ .hamburger--arrowalt .hamburger-inner::before { transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt .hamburger-inner::after { transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt.is-active .hamburger-inner::before { top: 0; transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt.is-active .hamburger-inner::after { bottom: 0; transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Alt Right */ .hamburger--arrowalt-r .hamburger-inner::before { transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r .hamburger-inner::after { transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r.is-active .hamburger-inner::before { top: 0; transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt-r.is-active .hamburger-inner::after { bottom: 0; transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Turn */ .hamburger--arrowturn.is-active .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn.is-active .hamburger-inner::before { transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrowturn.is-active .hamburger-inner::after { transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Turn Right */ .hamburger--arrowturn-r.is-active .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn-r.is-active .hamburger-inner::before { transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrowturn-r.is-active .hamburger-inner::after { transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Boring */ .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after { transition-property: none; } .hamburger--boring.is-active .hamburger-inner { transform: rotate(45deg); } .hamburger--boring.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--boring.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); } /* * Collapse */ .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse .hamburger-inner::before { transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse.is-active .hamburger-inner::before { top: 0; transform: rotate(-90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Collapse Reverse */ .hamburger--collapse-r .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse-r .hamburger-inner::before { transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse-r.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse-r.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Elastic */ .hamburger--elastic .hamburger-inner { top: 2px; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic .hamburger-inner::before { top: 10px; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic .hamburger-inner::after { top: 20px; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(135deg); transition-delay: 0.075s; } .hamburger--elastic.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(-270deg); transition-delay: 0.075s; } /* * Elastic Reverse */ .hamburger--elastic-r .hamburger-inner { top: 2px; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r .hamburger-inner::before { top: 10px; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic-r .hamburger-inner::after { top: 20px; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(-135deg); transition-delay: 0.075s; } .hamburger--elastic-r.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic-r.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(270deg); transition-delay: 0.075s; } /* * Emphatic */ .hamburger--emphatic { overflow: hidden; } .hamburger--emphatic .hamburger-inner { transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::before { left: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::after { top: 10px; right: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; } .hamburger--emphatic.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent; } .hamburger--emphatic.is-active .hamburger-inner::before { left: -80px; top: -80px; transform: translate3d(80px, 80px, 0) rotate(45deg); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic.is-active .hamburger-inner::after { right: -80px; top: -80px; transform: translate3d(-80px, 80px, 0) rotate(-45deg); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Emphatic Reverse */ .hamburger--emphatic-r { overflow: hidden; } .hamburger--emphatic-r .hamburger-inner { transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::before { left: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::after { top: 10px; right: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; } .hamburger--emphatic-r.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent; } .hamburger--emphatic-r.is-active .hamburger-inner::before { left: -80px; top: 80px; transform: translate3d(80px, -80px, 0) rotate(-45deg); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic-r.is-active .hamburger-inner::after { right: -80px; top: 80px; transform: translate3d(-80px, -80px, 0) rotate(45deg); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Minus */ .hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after { transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; } .hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after { opacity: 0; transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; } .hamburger--minus.is-active .hamburger-inner::before { top: 0; } .hamburger--minus.is-active .hamburger-inner::after { bottom: 0; } /* * Slider */ .hamburger--slider .hamburger-inner { top: 2px; } .hamburger--slider .hamburger-inner::before { top: 10px; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } .hamburger--slider .hamburger-inner::after { top: 20px; } .hamburger--slider.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--slider.is-active .hamburger-inner::before { transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0; } .hamburger--slider.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(-90deg); } /* * Slider Reverse */ .hamburger--slider-r .hamburger-inner { top: 2px; } .hamburger--slider-r .hamburger-inner::before { top: 10px; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } .hamburger--slider-r .hamburger-inner::after { top: 20px; } .hamburger--slider-r.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(-45deg); } .hamburger--slider-r.is-active .hamburger-inner::before { transform: rotate(45deg) translate3d(5.71429px, -6px, 0); opacity: 0; } .hamburger--slider-r.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(90deg); } /* * Spin */ .hamburger--spin .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spin Reverse */ .hamburger--spin-r .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin-r .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r.is-active .hamburger-inner { transform: rotate(-225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin-r.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spring */ .hamburger--spring .hamburger-inner { top: 2px; transition: background-color 0s 0.13s linear; } .hamburger--spring .hamburger-inner::before { top: 10px; transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring .hamburger-inner::after { top: 20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring.is-active .hamburger-inner { transition-delay: 0.22s; background-color: transparent; } .hamburger--spring.is-active .hamburger-inner::before { top: 0; transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--spring.is-active .hamburger-inner::after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(-45deg); } /* * Spring Reverse */ .hamburger--spring-r .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; } .hamburger--spring-r .hamburger-inner::before { transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spring-r.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; } .hamburger--spring-r.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand */ .hamburger--stand .hamburger-inner { transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; } .hamburger--stand .hamburger-inner::before { transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand .hamburger-inner::after { transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand.is-active .hamburger-inner { transform: rotate(90deg); background-color: transparent; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; } .hamburger--stand.is-active .hamburger-inner::before { top: 0; transform: rotate(-45deg); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand.is-active .hamburger-inner::after { bottom: 0; transform: rotate(45deg); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand Reverse */ .hamburger--stand-r .hamburger-inner { transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; } .hamburger--stand-r .hamburger-inner::before { transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r .hamburger-inner::after { transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r.is-active .hamburger-inner { transform: rotate(-90deg); background-color: transparent; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; } .hamburger--stand-r.is-active .hamburger-inner::before { top: 0; transform: rotate(-45deg); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(45deg); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Squeeze */ .hamburger--squeeze .hamburger-inner { transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { transform: rotate(45deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Vortex */ .hamburger--vortex .hamburger-inner { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after { transition-duration: 0s; transition-delay: 0.1s; transition-timing-function: linear; } .hamburger--vortex .hamburger-inner::before { transition-property: top, opacity; } .hamburger--vortex .hamburger-inner::after { transition-property: bottom, transform; } .hamburger--vortex.is-active .hamburger-inner { transform: rotate(765deg); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after { transition-delay: 0s; } .hamburger--vortex.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex.is-active .hamburger-inner::after { bottom: 0; transform: rotate(90deg); } /* * Vortex Reverse */ .hamburger--vortex-r .hamburger-inner { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after { transition-duration: 0s; transition-delay: 0.1s; transition-timing-function: linear; } .hamburger--vortex-r .hamburger-inner::before { transition-property: top, opacity; } .hamburger--vortex-r .hamburger-inner::after { transition-property: bottom, transform; } .hamburger--vortex-r.is-active .hamburger-inner { transform: rotate(-765deg); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after { transition-delay: 0s; } .hamburger--vortex-r.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); } /* btn shared*/ .btn-square-group li { width: 46%; margin-right: 2%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .btn_group { text-align: center; } .btn_group li { margin-bottom: 30px; } .btn_group .w_full { width: 90%; margin: 0 auto 30px; } .btn_group li a { display: block; position: relative; } .btn_group li a:after { position: absolute; right: 0px; top: 50%; transform: translateY(-50%); content: '\f105'; font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; padding-left: 10px; } .btn_group .btn-down a:after { content: '\f107'; } .btn_group .btn-l a:after { display: none; } .btn_group .btn-l a:before { content: '\f105'; font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; padding-right: 10px; } .btn-circle-group { text-align: center; } .btn-circle-group li { display: inline-block; margin: 0 5px 20px; } .btn-circle-group li a { height: 100%; padding-top: 20px; line-height: 2.5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .btn-circle-group li a:after { display: block; position: static; top: auto; bottom: 15px; right: 50%; line-height: 1; padding: 0; } .btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #000;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #717070; border-radius: 3px; } .btn-square:active { /*ボタンを押ã—ãŸã¨ã*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下ã«å‹•ã*/ border-bottom: none;/*線を消ã™*/ } .btn-square-shadow { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #000;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #717070; border-radius: 3px; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); } .btn-square-shadow:active { /*ボタンを押ã—ãŸã¨ã*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下ã«å‹•ã*/ box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影をå°ã•ã*/ border-bottom: none; } .btn-square-emboss { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #000;/*ボタン色*/ color: #fff;/*ボタン色より暗ã*/ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); border-bottom: solid 3px #717070; border-radius: 3px; font-weight: bold; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } .btn-square-emboss:active { -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); border-bottom: none; } .btn-square-raised { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #000;/*ボタン色*/ color: #000;/*ボタン色ã¨åŒã˜ã«*/ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); border-bottom: solid 3px #717070; border-radius: 3px;/*角ã®ä¸¸ã¿*/ font-weight: bold; text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38); } .btn-square-raised:active { /*ボタンを押ã—ãŸã¨ã*/ -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); border-bottom: none; } .btn-square-slant { display: inline-block; position: relative; padding: 0.5em 1.4em; text-decoration: none; background: #000;/*ボタン色*/ color: #FFF; border-bottom: solid 5px #717070;/*ボタン色より暗ã‚ã«*/ border-right: solid 5px #717070;/*ボタン色より暗ã‚ã«*/ } .btn-square-slant:before { content: " "; position: absolute; bottom: -5px; left: -1px; width: 0; height: 0; border-width: 0 6px 6px 0px; border-style: solid; border-color: transparent; border-bottom-color: #FFF; } .btn-square-slant:after { content: " "; position: absolute; top: -1px; right: -5px; width: 0; height: 0; border-width: 0px 6px 6px 0px; border-style: solid; border-color: #FFF; border-bottom-color: transparent; } .btn-square-slant:active { /*ボタンを押ã—ãŸã¨ã*/ border: none; -webkit-transform: translate(6px, 6px); transform: translate(6px, 6px); } .btn-square-slant:active:after, .btn-square-slant:active:before { content: none;/*ボタンを押ã™ã¨ç·šãŒæ¶ˆãˆã‚‹*/ } .btn-square-above-look { display: inline-block; position: relative; padding: 0.35em 1em; background: #000;/*ボタン色*/ color: #FFF; text-decoration: none; } .btn-square-above-look:before { content: ""; position: absolute; top: -8px; left: 0; width: -webkit-calc(100% - 16px); width: calc(100% - 8px); height: 0; border: solid 4px transparent; border-bottom-color: #717070; } .btn-square-above-look:active { /*押ã—ãŸã¨ã*/ padding: 0.32em 0.9em; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .btn-square-above-look:active:before { width: -webkit-calc(100% - 12px); width: calc(100% - 12px); } .btn-square-above-look:active:before { top: -12px; border-width: 6px; } .btn-square-pop { position: relative; display: inline-block; padding: 0.25em 0.5em; text-decoration: none; color: #FFF; background: #000;/*背景色*/ border-bottom: solid 2px #717070;/*å°‘ã—濃ã„ç›®ã®è‰²ã«*/ border-radius: 4px;/*角ã®ä¸¸ã¿*/ box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19); font-weight: bold; } .btn-square-pop:active { border-bottom: solid 2px #fd9535; box-shadow: 0 0 2px rgba(0, 0, 0, 0.30); } .btn-sticky { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #000; border-left: solid 6px #717070;/*左線*/ color: #fff;/*æ–‡å—色*/ font-weight: bold; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); } .btn-sticky:active { box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1); transform: translateY(2px); } .btn-square-little-rich { position: relative; display: inline-block; padding: 0.25em 0.5em; text-decoration: none; color: #FFF; background: #000;/*色*/ border: solid 1px #717070;/*線色*/ border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); text-shadow: 0 1px 0 rgba(0,0,0,0.2); } .btn-square-little-rich:active { /*押ã—ãŸã¨ã*/ border: solid 1px #000; box-shadow: none; text-shadow: none; } .btn-square-soft { display: inline-block; position: relative; text-decoration: none; color: #fff; width: 120px; height: 50px; line-height: 50px; padding: 0 10px; border-radius: 5px; text-align: center; vertical-align: middle; overflow: hidden; font-weight: bold; background: linear-gradient(#000 0%, #a7a3a3 100%); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); } .btn-square-soft:active { /*押ã—ãŸã¨ã*/ -webkit-transform: translateY(2px); transform: translateY(2px);/*沈むよã†ã«*/ box-shadow: 0 0 1px rgba(0, 0, 0, 0.15); background-image: linear-gradient(#000 0%, #ffbcbc 100%);/*グラデーションを明るã*/ } .btn-flat-simple { position: relative; display: inline-block; font-weight: bold; padding: 0.25em 0.5em; text-decoration: none; color: #fff; background: #000; transition: .4s; } .btn-flat-simple:hover { background: #00bcd4; color: white; } .btn-flat-border { display: inline-block; padding: 0.3em 1em; text-decoration: none; color: #000; border: solid 2px #000; border-radius: 3px; transition: .4s; } .btn-flat-border:hover { background: #000; color: white; } .btn-flat-double-border { display: inline-block; padding: 0.5em 1em; text-decoration: none; color: #000; border: double 4px #000; border-radius: 3px; transition: .4s; } .btn-flat-double-border:hover { background: #fffbef; } .btn-flat-dashed-border { display: inline-block; padding: 0.5em 1em; text-decoration: none; color: #000; border: dashed 1px #000; border-radius: 3px; transition: .4s; } .btn-flat-dashed-border:hover { border-style: dotted; color: #679efd; } .btn-flat-dashed-filled { display: inline-block; padding: 0.5em 1em; text-decoration: none; color: #000; border: dashed 1px #000; background: #fff; border-radius: 3px; transition: .4s; } .btn-flat-dashed-filled:hover { background: #000; color: #FFF; } .btn-flat-vertical-border { position: relative; display: inline-block; font-weight: bold; padding: 0.5em 1em; text-decoration: none; border-left: solid 4px #717070; border-right: solid 4px #717070; color: #fff; background: #000; transition: .4s; } .btn-flat-vertical-border:hover { background: #668ad8; color: #FFF; } .btn-border-bottom { position: relative; display: inline-block; font-weight: bold; padding: 0.25em 0; text-decoration: none; color: #000; } .btn-border-bottom:before { position: absolute; content: ''; width: 100%; height: 4px; top: 100%; left: 0; border-radius: 3px; background: #000; transition: .2s; } .btn-border-bottom:hover:before { top: -webkit-calc(100% - 3px); top: calc(100% - 3px); } .btn-horizontal-border { position: relative; display: inline-block; font-weight: bold; padding: 12px 0 8px; text-decoration: none; color: #000; transition: .4s; } .btn-horizontal-border:before { position: absolute; content: ''; width: 100%; height: 4px; top: 100%; left: 0; border-radius: 3px; background: #000; transition: .2s; } .btn-horizontal-border:after { position: absolute; content: ''; width: 100%; height: 4px; top: 0; left: 0; border-radius: 3px; background: #000; transition: .2s; } .btn-horizontal-border:hover:before { top: -webkit-calc(100% - 3px); top: calc(100% - 3px); } .btn-horizontal-border:hover:after { top: 3px; } .btn-flat-bottom-border { position: relative; display: inline-block; font-weight: bold; padding: 7px 10px 10px 10px; text-decoration: none; color: #FFF; background: #000; transition: .4s; } .btn-flat-bottom-border span { border-bottom: solid 2px #FFF; display: block; } .btn-flat-bottom-border:hover { background: #000; } .btn-flat-horizontal-border { position: relative; display: inline-block; font-weight: bold; padding: 1em 0.5em; text-decoration: none; color: #FFF; background: #000; transition: .4s; } .btn-flat-horizontal-border span { border-bottom: solid 2px #FFF; border-top: solid 2px #FFF; display: block; } .btn-flat-horizontal-border:hover span { padding: 0.1em 0; } .btn-top-radius { position: relative; display: inline-block; font-weight: bold; padding: 8px 10px 5px 10px; text-decoration: none; color: #fff; background: #000; border-bottom: solid 4px rgba(0,0,0,0.5); border-radius: 15px 15px 0 0; transition: .4s; } .btn-top-radius:hover { background: #f94300; color: #FFF; } .btn-flat-stripe { position: relative; display: inline-block; font-weight: bold; text-decoration: none; border-left: solid 4px #717070; border-right: solid 4px #717070; color: #fff; text-shadow: 0 0 5px white; padding: 0.5em 1em; background: repeating-linear-gradient(-45deg, #696260, #5f5856 3px, #000 3px, #000 7px); transition: .4s; } .btn-flat-stripe:hover { background: repeating-linear-gradient(-45deg, #e4a58d, #e4a58d 5px, #e9f4ff 5px, #e9f4ff 9px); } .btn-sf-like { position: relative; display: inline-block; font-weight: bold; text-decoration: none; color: #FFF; text-shadow: 0 0 5px rgba(255, 255, 255, 0.73); padding: 0.3em 0.5em; background: #000; border-top: solid 3px #717070; border-bottom: solid 3px #717070; transition: .4s; } .btn-sf-like:hover { text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83); } .btn-stitch { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #000; color: #FFF; border-radius: 4px; box-shadow: 0px 0px 0px 5px #000; border: dashed 1px #FFF; } .btn-stitch:hover { border: dotted 1px #FFF; } .btn-corner-right { color: #000; } .btn-corner-right a { border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: left; padding: 2px 0 2px 20px; } .btn-corner-right a:after { right: 20px!important; } .btn-circle-flat { display: inline-block; text-decoration: none; background: #000; color: #FFF; width: 88px; height: 88px; border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; transition: .4s; } .btn-circle-flat:hover { background: #668ad8; } .btn-circle-stitch { display: inline-block; text-decoration: none; background: #000; color: #FFF; width: 80px; height: 80px; border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; box-shadow: 0px 0px 0px 5px #000; border: dashed 1px #FFF; transition: .4s; } .btn-circle-stitch:hover { background: #668ad8; box-shadow: 0px 0px 0px 5px #668ad8; } .btn-circle-border { display: inline-block; text-decoration: none; background: #000; color: rgba(255, 255, 255, 1); font-weight: bold; width: 80px; height: 80px; border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; box-shadow: 0px 0px 0px 5px #000; border: solid 2px rgba(255, 255, 255, 1); transition: .4s; } .btn-circle-border:hover { border-style: dashed; } .btn-circle-3d { display: inline-block; text-decoration: none; background: #000; color: #FFF; width: 80px; height: 77px; border-radius: 50%; text-align: center; font-weight: bold; vertical-align: middle; overflow: hidden; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); border-bottom: solid 3px #a9a4a4; transition: .4s; } .btn-circle-3d:active { -webkit-transform: translateY(2px); transform: translateY(2px); box-shadow: 0 0 1px rgba(0, 0, 0, 0.15); border-bottom: none; } .btn-circle-3d-emboss { display: inline-block; text-decoration: none; background: #000; color: #fff; width: 80px; height: 80px; font-size: 14px; border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; font-weight: bold; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); border-bottom: solid 3px #a9a4a4; text-shadow: -1px -1px rgba(255, 255, 255, 0.43), 1px 1px rgba(0, 0, 0, 0.49); transition: .4s; } .btn-circle-3d-emboss:active { -webkit-transform: translateY(2px); transform: translateY(2px); box-shadow: 0 0 2px rgba(0, 0, 0, 0.35); border-bottom: none; } .btn-circle-3d-dent { display: inline-block; text-decoration: none; background: #000; color: #fff; width: 83px; font-size: 15px; height: 80px; border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; box-shadow: inset 0px 3px 0 rgba(255,255,255,0.3), 0 3px 3px rgba(0, 0, 0, 0.3); font-weight: bold; border-bottom: solid 3px #a9a4a4; text-shadow: 1px 1px 1px rgba(45, 11, 11, 0.65); transition: .4s; } .btn-circle-3d-dent:active { -webkit-transform: translateY(1px); transform: translateY(1px); box-shadow: 0 0 2px rgba(0, 0, 0, 0.35); border-bottom: none; } .btn-circle-border-simple { display: inline-block; text-decoration: none; color: #000; width: 76px; height: 76px; border-radius: 50%; border: solid 2px #000; text-align: center; vertical-align: middle; overflow: hidden; font-weight: bold; transition: .4s; } .btn-circle-border-simple:hover { } .btn-circle-border-double { display: inline-block; text-decoration: none; color: #000; width: 76px; height: 76px; border-radius: 50%; border: double 4px #000; text-align: center; vertical-align: middle; overflow: hidden; transition: .6s; } .btn-circle-border-double:hover { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } .btn-social-long-twitter { color: #FFF;/*æ–‡å—・アイコン色*/ border-radius: 7px;/*角丸ã«*/ display: inline-block; height: 50px;/*高ã•*/ width: 190px;/*å¹…*/ text-align: center;/*ä¸èº«ã‚’ä¸å¤®å¯„ã›*/ font-size: 18px;/*æ–‡å—ã®ã‚µã‚¤ã‚º*/ line-height: 50px;/*高ã•ã¨åˆã‚ã›ã‚‹*/ vertical-align: middle;/*åž‚ç›´ä¸å¤®å¯„ã›*/ background: #1da1f3; overflow: hidden;/*ã¯ã¿å‡ºãŸéƒ¨åˆ†ã‚’éš ã™*/ text-decoration: none;/*下線ã¯æ¶ˆã™*/ } .btn-social-long-twitter .fa-twitter { text-shadow: 2px 2px 0px #4287d6; font-size: 30px; } .btn-social-long-twitter span { display: inline-block; transition: .5s; } .btn-social-long-twitter:hover span { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); } .btn-social-long-facebook { color: #FFF;/*æ–‡å—・アイコン色*/ border-radius: 7px;/*角丸ã«*/ display: inline-block; height: 50px;/*高ã•*/ width: 190px;/*å¹…*/ text-align: center;/*ä¸èº«ã‚’ä¸å¤®å¯„ã›*/ font-size: 18px;/*æ–‡å—ã®ã‚µã‚¤ã‚º*/ line-height: 50px;/*高ã•ã¨åˆã‚ã›ã‚‹*/ vertical-align: middle;/*åž‚ç›´ä¸å¤®å¯„ã›*/ background: #4966a0; overflow: hidden;/*ã¯ã¿å‡ºãŸéƒ¨åˆ†ã‚’éš ã™*/ text-decoration: none;/*下線ã¯æ¶ˆã™*/ } .btn-social-long-facebook .fa-facebook { text-shadow: 2px 2px 1px #224282; font-size: 30px; } .btn-social-long-facebook span { /*テã‚スト*/ display: inline-block; transition: .5s; } .btn-social-long-facebook:hover span { /*ホãƒãƒ¼ã§ä¸€å‘¨å›žè»¢*/ -webkit-transform: rotateX(360deg); transform: rotateX(360deg); } .btn-social-long-insta { /*ボタンã®ä¸‹åœ°*/ color: #FFF;/*æ–‡å—・アイコン色*/ border-radius: 7px;/*角丸ã«*/ position: relative; display: inline-block; height: 50px;/*高ã•*/ width: 190px;/*å¹…*/ text-align: center;/*ä¸èº«ã‚’ä¸å¤®å¯„ã›*/ font-size: 18px;/*æ–‡å—ã®ã‚µã‚¤ã‚º*/ line-height: 50px;/*高ã•ã¨åˆã‚ã›ã‚‹*/ vertical-align: middle;/*åž‚ç›´ä¸å¤®å¯„ã›*/ background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/ overflow: hidden;/*ã¯ã¿å‡ºãŸéƒ¨åˆ†ã‚’éš ã™*/ text-decoration: none;/*下線ã¯æ¶ˆã™*/ } .btn-social-long-insta:before { /*グラデーション②*/ content: ''; position: absolute; top: 0; left: 0; width: 100%;/*全体を覆ã†*/ height: 100%;/*全体を覆ã†*/ background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat; } .btn-social-long-insta .fa-instagram { /*アイコン*/ font-size: 35px;/*アイコンサイズ*/ position: relative; top: 4px;/*アイコンä½ç½®ã®å¾®èª¿æ•´*/ } .btn-social-long-insta span { /*テã‚スト*/ display: inline-block; position: relative; transition: .5s } .btn-social-long-insta:hover span { /*ホãƒãƒ¼ã§ä¸€å‘¨å›žè»¢*/ -webkit-transform: rotateX(360deg); transform: rotateX(360deg); } .sns-button li { margin-bottom: 15px; } .sns-button li a { display: block; width: 100%; padding-left: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: left; } .sns-button li i { position: relative; z-index: 1; } .btn-cv a { border: solid #fff 3px; border-radius: 12px; box-shadow: 1px 1px 10px 0 #a1a1a1; color: #fff; display: block; font-size: 1.6em; font-weight: 700; line-height: 1.3; margin: 2em auto; padding: 1em 2em .8em; position: relative; text-align: center; text-decoration: none; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; vertical-align: middle; width: 59%; } .btn-cv a { background-color: #000; /* text-shadow: 0 0 10px rgba(255,255,255,.8), 1px 1px 1px rgba(0,0,0,1)*/ } .btn-cv a:before { content: "\f138"; font-family: "fontello"; font-weight: 400; font-size: 1.1em; margin-top: -.6em; position: absolute; right: 15px; top: 50% } .btn-cv a:hover { box-shadow: 1px 1px 2px 0 #a1a1a1; filter: alpha(opacity=70); opacity: .7 } .is-trembling a:before { -webkit-animation-name: is-trembling; -webkit-animation-duration: 1.4s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease; -moz-animation-name: is-trembling; -moz-animation-duration: 1.4s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease } @-webkit-keyframes is-trembling { 0% { -webkit-transform:translate(-3px, 0) } 100% { -webkit-transform:translate(0, 0) } } .is-bounce { animation: bounce 4s infinite; -moz-animation: bounce 4s infinite; -webkit-animation: bounce 4s infinite; -webkit-animation-delay: 4s; animation-delay: 4s } @-webkit-keyframes bounce { 0%, 4%, 10%, 18%, 100% { -webkit-transform:translateY(0) } 5% { -webkit-transform:translateY(-6px) } 12% { -webkit-transform:translateY(-4px) } } @keyframes bounce { 20%, 24%, 30%, 34%, 100% { -webkit-transform:translateY(0); transform:translateY(0) } 25% { -webkit-transform:translateY(-6px); transform:translateY(-6px) } 32% { -webkit-transform:translateY(-4px); transform:translateY(-4px) } } .is-bounce+.is-bounce { -webkit-animation-delay: .5s; animation-delay: .5s } .is-reflection a { overflow: hidden } .is-reflection a:after { -moz-animation: is-reflection 4s ease-in-out infinite; -moz-transform: rotate(45deg); -ms-animation: is-reflection 4s ease-in-out infinite; -ms-transform: rotate(45deg); -o-animation: is-reflection 4s ease-in-out infinite; -o-transform: rotate(45deg); -webkit-animation: is-reflection 4s ease-in-out infinite; -webkit-transform: rotate(45deg); animation: is-reflection 4s ease-in-out infinite; background-color: #fff; content: " "; height: 100%; left: 0; opacity: 0; position: absolute; top: -180px; transform: rotate(45deg); width: 30px } .is-reflection+.is-reflection a:after { -webkit-animation-delay: .3s; animation-delay: .3s } @keyframes is-reflection { 0% { -webkit-transform:scale(0) rotate(45deg); transform:scale(0) rotate(45deg); opacity:0 } 80% { -webkit-transform:scale(0) rotate(45deg); transform:scale(0) rotate(45deg); opacity:.5 } 81% { -webkit-transform:scale(4) rotate(45deg); transform:scale(4) rotate(45deg); opacity:1 } 100% { -webkit-transform:scale(50) rotate(45deg); transform:scale(50) rotate(45deg); opacity:0 } } @-webkit-keyframes is-reflection { 0% { -webkit-transform:scale(0) rotate(45deg); opacity:0 } 80% { -webkit-transform:scale(0) rotate(45deg); opacity:.5 } 81% { -webkit-transform:scale(4) rotate(45deg); opacity:1 } 100% { -webkit-transform:scale(50) rotate(45deg); opacity:0 } }