diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/public/Buttons/vikrantvikaasa27-1/ani.css b/public/Buttons/vikrantvikaasa27-1/ani.css new file mode 100644 index 000000000..78317984d --- /dev/null +++ b/public/Buttons/vikrantvikaasa27-1/ani.css @@ -0,0 +1,99 @@ +@import url(https://unpkg.com/open-props/open-props.min.css); + @import url(https://unpkg.com/open-props/normalize.min.css); + +* { + box-sizing: border-box; +} + +body { + display: grid; + place-items: center; + min-height: 100vh; + background: var(--gray-12); +} + +ul { + padding: 0; + display: inline-grid; + grid-auto-flow: column; + list-style-type: none; + grid-template-columns: auto repeat(3, calc((var(--active, 0) * 130px) + 10px)); + transition: grid-template-columns 0.35s var(--ease-elastic-1); +} + +main { + width: 66ch; +} + +li { + display: grid; + justify-content: end; + z-index: calc(var(--count) - var(--index)); +} + +nav { + position: relative; +} + +nav > button { + position: absolute; + left: 0; + background: red; + z-index: var(--count); +} + +a { + background: hsl(0 0% 60% / 0.18); + display: inline-block; + padding: var(--size-2) var(--size-4); + border-radius: var(--radius-5); + margin: 0; + color: var(--gray-0); + font-size: var(--font-size-1); + font-weight: var(--font-weight-0); + backdrop-filter: blur(40px); + transition: color 0.2s, background 0.2s; +} + +a:visited { + color: var(--gray-0); +} + +svg { + height: 24px; + aspect-ratio: 1; + fill: currentColor; +} + +span { + display: grid; + align-items: center; + grid-auto-flow: column; + grid-template-columns: 16px 1fr; + gap: 0.25rem; +} + +li:is( + :nth-of-type(2), + :nth-of-type(3), + :nth-of-type(4) +) span { + opacity: var(--active, 0); +} + +li:is( + :nth-of-type(2), + :nth-of-type(3), + :nth-of-type(4) +) a:is(:hover, :focus) { + background: var(--gray-0); + color: var(--gray-12); +} + +a:focus-visible { + outline-color: transparent; +} + +ul:is(:focus-within, :hover) { + --active: 1; +} \ No newline at end of file diff --git a/public/Buttons/vikrantvikaasa27-1/index.html b/public/Buttons/vikrantvikaasa27-1/index.html new file mode 100644 index 000000000..2d0acdc54 --- /dev/null +++ b/public/Buttons/vikrantvikaasa27-1/index.html @@ -0,0 +1,50 @@ + + + + + + + Ani-Button + + + +
+ +
+ + \ No newline at end of file diff --git a/public/Buttons/vikrantvikaasa27-2/ani.css b/public/Buttons/vikrantvikaasa27-2/ani.css new file mode 100644 index 000000000..6a533fe9b --- /dev/null +++ b/public/Buttons/vikrantvikaasa27-2/ani.css @@ -0,0 +1,359 @@ + + +.button{ + --top : rgba(100,100,100,.8) ; + --bottom : rgba(100,100,100,.2) ; + --side : rgba(100,100,100,.5) ; + + --1_top : rgba(216,0,60,.8) ; + --1_bottom : rgba(216,0,60,.2) ; + --1_side : rgba(216,0,60,.5) ; + + --2_top : rgba(0,100,190,.8) ; + --2_bottom : rgba(0,100,190,.2) ; + --2_side : rgba(0,100,190,.5) ; + + --3_top : rgba(0,170,100,.8) ; + --3_bottom : rgba(0,170,100,.2) ; + --3_side : rgba(0,170,100,.5) ; + + --4_top : rgba(255,230,20,.8) ; + --4_bottom : rgba(255,230,20,.2) ; + --4_side : rgba(255,230,20,.5) ; + + --5_top : rgba(155,50,255,.8) ; + --5_bottom : rgba(155,50,255,.2) ; + --5_side : rgba(155,50,255,.5) ; +} + +.button{ + display : flex ; + position : relative ; + width : 280px ; + height : 80px ; + text-decoration : none ; + perspective : 600px ; + background : linear-gradient( rgba(255,255,255,.1) 0% , rgba(255,255,255,0) 30% ,rgba(255,255,255,0) 70% , rgba(255,255,255,.1)) ; + box-shadow : 0 0 32px rgba(0,0,0,1) ; +} +.button::before, +.button::after{ + content : '' ; + position : absolute ; + top : 0 ; + left : 0 ; + right : 0 ; + margin : 0 auto ; + width : 100% ; + height : 100% ; +} +.button::before{ + top : 0 ; + transform-origin : top center ; + transform : rotateX(70deg) ; + background : linear-gradient(135deg , rgba(255,255,255,.3) 10%, rgba(255,255,255,0) 60%); +} +.button::after{ + bottom : 0 ; + transform-origin : bottom center ; + transform : rotateX(-110deg) ; + background : radial-gradient( rgba(255,255,255,0) 40%, rgba(255,255,255,.1) ) ; +} +.button__wrapper{ + position : relative ; + z-index : 2 ; + width : 100% ; + height : 100% ; + background : linear-gradient( rgba(255,255,255,.4) 0% , rgba(255,255,255,0) 30% ,rgba(255,255,255,0) 70% , rgba(255,255,255,.2)) ; + transform : translate3d( 0 , 27px , 74px) ; + perspective : 600px ; +} +.button__text{ + position : relative ; + display : flex ; + justify-content : center ; + align-items : center ; + width : 100% ; + height : 100% ; + font-family: 'Alfa Slab One', cursive; + font-size : 32px ; + letter-spacing : 4px ; + color : rgba(255,255,255,.2) ; + transition : all ease-in-out 1s ; +} +.button__text::before{ + content : '' ; + position : absolute ; + z-index : 1 ; + top : 0 ; + left : 0 ; + width : 230px ; + height : 80px ; + background : linear-gradient(25deg , rgba(255,255,255,.1) , rgba(255,255,255,0)) ; + clip-path : path('M230,0H0V80H146.96c0-35.33,33.95-65.83,83.04-80Z') ; +} +.button__text::after{ + content : '' ; + position : absolute ; + z-index : 2 ; + top : 4px ; + left : 4px ; + width : 272px ; + height : 40px ; + background : linear-gradient(25deg , rgba(255,255,255,.3) , rgba(255,255,255,0)) ; + clip-path : path('M272,9.22V0H0V40H.32C48.19,22.59,151.14,10.26,272,9.22Z') ; +} +.button__wrapper::before, +.button__wrapper::after{ + content : '' ; + position : absolute ; + top : 0 ; + width : 84px ; + height : 100% ; + background : linear-gradient(90deg , rgba(255,255,255,.2) 0% , rgba(255,255,255,0) 30% ,rgba(255,255,255,0) 70% , rgba(255,255,255,.2)) ; + background : radial-gradient( rgba(255,255,255,0) 40%, rgba(255,255,255,.1) ) ; +} +.button__wrapper::before{ + left : 0 ; + transform-origin : left center ; + transform : rotateY(90deg) skewY(-20deg); +} +.button__wrapper::after{ + right : 0 ; + transform-origin : right center ; + transform : rotateY(-90deg) skewY(20deg); +} + +.button__box{ + position : absolute ; + top : 0 ; + left : 8px ; + bottom : 0 ; + margin : auto 0 ; + width : 264px ; + height : 70px ; + transform : translate3d(0, 4px, 10px) ; + perspective : 600px ; +} +.inner{ + transition : all ease-in-out 1s ; +} +.inner__back{ + position : absolute ; + top : 0 ; + left : 0 ; + width : 0 ; + height : 100% ; + background : var(--bottom); + perspective : 600px ; +} +.inner__top{ + position : absolute ; + z-index : 3 ; + top : 0 ; + left : 0 ; + width : 0 ; + height : 100% ; + transform-origin : top left ; + transform : rotateX(70deg) ; + background : var(--top); +} +.inner__front{ + position : absolute ; + z-index : 3 ; + top : 0 ; + left : 0 ; + width : 0 ; + height : 100% ; + transform-origin : top left ; + transform : translate3d(0, 24px, 68px ) ; + background : var(--top); +} +.inner__bottom{ + position : absolute ; + z-index : 2 ; + top : 0 ; + left : 0 ; + width : 0 ; + height : 100% ; + transform-origin : bottom left ; + transform : rotateX(-110deg) ; + background : var(--bottom); +} +.inner__left{ + position : absolute ; + z-index : 2 ; + top : 0 ; + left : 0 ; + width : 68px ; + height : 100% ; + transform-origin : center left ; + transform : rotateY(-90deg) skewY(20deg) ; + background : rgba(255,0,0,0) ; + transition : all linear .01s ; +} +.inner__right{ + position : absolute ; + z-index : 2 ; + top : 0 ; + left : 0 ; + width : 68px ; + height : 100% ; + transform-origin : center left ; + transform : rotateY(-90deg) skewY(20deg) ; + background : rgba(255,0,0,0) ; +} +.button:hover .inner__top, +.button:hover .inner__front, +.button:hover .inner__bottom, +.button:hover .inner__back{ + width : 100% ; +} +.button:hover .inner__left{ + background : var(--side) ; +} +.button:hover .inner__right{ + left : 100% ; + background : var(--side) ; +} +.button:hover .button__text{ + color : rgba(255,255,255,1) ; +} +.plate{ + position : absolute ; + z-index : 10 ; + top : 0 ; + left : -20px ; + width : 320px ; + height : 120px ; + animation-duration : 3s ; + animation-iteration-count : infinite ; +} +.plate:nth-child(1){ + animation-name : plate_1 ; +} +.plate:nth-child(2){ + animation-name : plate_2 ; +} +.plate:nth-child(3){ + animation-name : plate_3 ; +} +.plate:nth-child(4){ + animation-name : plate_4 ; +} +.plate:nth-child(5){ + animation-name : plate_5 ; +} +.button:hover .plate{ + animation-play-state : paused ; +} +.plate:nth-child(1):hover ~ .button__box .inner__top, +.plate:nth-child(1):hover ~ .button__box .inner__front{ + background : var(--1_top); +} +.plate:nth-child(1):hover ~ .button__box .inner__left, +.plate:nth-child(1):hover ~ .button__box .inner__right{ + background : var(--1_side); +} +.plate:nth-child(1):hover ~ .button__box .inner__back, +.plate:nth-child(1):hover ~ .button__box .inner__bottom{ + background : var(--1_bottom); +} +.plate:nth-child(2):hover ~ .button__box .inner__top, +.plate:nth-child(2):hover ~ .button__box .inner__front{ + background : var(--2_top); +} +.plate:nth-child(2):hover ~ .button__box .inner__left, +.plate:nth-child(2):hover ~ .button__box .inner__right{ + background : var(--2_side); +} +.plate:nth-child(2):hover ~ .button__box .inner__back, +.plate:nth-child(2):hover ~ .button__box .inner__bottom{ + background : var(--2_bottom); +} +.plate:nth-child(3):hover ~ .button__box .inner__top, +.plate:nth-child(3):hover ~ .button__box .inner__front{ + background : var(--3_top); +} +.plate:nth-child(3):hover ~ .button__box .inner__left, +.plate:nth-child(3):hover ~ .button__box .inner__right{ + background : var(--3_side); +} +.plate:nth-child(3):hover ~ .button__box .inner__back, +.plate:nth-child(3):hover ~ .button__box .inner__bottom{ + background : var(--3_bottom); +} +.plate:nth-child(4):hover ~ .button__box .inner__top, +.plate:nth-child(4):hover ~ .button__box .inner__front{ + background : var(--4_top); +} +.plate:nth-child(4):hover ~ .button__box .inner__left, +.plate:nth-child(4):hover ~ .button__box .inner__right{ + background : var(--4_side); +} +.plate:nth-child(4):hover ~ .button__box .inner__back, +.plate:nth-child(4):hover ~ .button__box .inner__bottom{ + background : var(--4_bottom); +} +.plate:nth-child(5):hover ~ .button__box .inner__top, +.plate:nth-child(5):hover ~ .button__box .inner__front{ + background : var(--5_top); +} +.plate:nth-child(5):hover ~ .button__box .inner__left, +.plate:nth-child(5):hover ~ .button__box .inner__right{ + background : var(--5_side); +} +.plate:nth-child(5):hover ~ .button__box .inner__back, +.plate:nth-child(5):hover ~ .button__box .inner__bottom{ + background : var(--5_bottom); +} +@keyframes plate_1{ + 0% { transform : scale(1) ; } + 19.9%{ transform : scale(1) ; } + 20% { transform : scale(0) ; } + 100% { transform : scale(0) ; } +} +@keyframes plate_2{ + 0% { transform : scale(0) ; } + 19.9%{ transform : scale(0) ; } + 20% { transform : scale(1) ; } + 39.9%{ transform : scale(1) ; } + 40% { transform : scale(0) ; } + 100% { transform : scale(0) ; } +} +@keyframes plate_3{ + 0% { transform : scale(0) ; } + 39.9%{ transform : scale(0) ; } + 40% { transform : scale(1) ; } + 59.9%{ transform : scale(1) ; } + 60% { transform : scale(0) ; } + 100% { transform : scale(0) ; } +} +@keyframes plate_4{ + 0% { transform : scale(0) ; } + 59.9%{ transform : scale(0) ; } + 60% { transform : scale(1) ; } + 79.9%{ transform : scale(1) ; } + 80% { transform : scale(0) ; } + 100% { transform : scale(0) ; } +} +@keyframes plate_5{ + 0% { transform : scale(0) ; } + 79.9%{ transform : scale(0) ; } + 80% { transform : scale(1) ; } + 100% { transform : scale(1) ; } +} + + + + +/* 本体に関係ないスタイル */ +.container{ + width : 100% ; + height : 600px ; + display : flex ; + flex-direction : column ; + justify-content : center ; + align-items : center ; + background : #222 ; +} diff --git a/public/Buttons/vikrantvikaasa27-2/index.html b/public/Buttons/vikrantvikaasa27-2/index.html new file mode 100644 index 000000000..44bcc5c72 --- /dev/null +++ b/public/Buttons/vikrantvikaasa27-2/index.html @@ -0,0 +1,32 @@ + + + + + + + Document + + + +
+ +
+
+
+
+
+
+ CLICK! +
+
+
+
+
+
+
+
+
+ +
+ + \ No newline at end of file diff --git a/public/Buttons/vikrantvikaasa27/ani.css b/public/Buttons/vikrantvikaasa27/ani.css new file mode 100644 index 000000000..6f5e5ade3 --- /dev/null +++ b/public/Buttons/vikrantvikaasa27/ani.css @@ -0,0 +1,71 @@ +.btn-12{ + position: relative; + right: 10px; + margin-top: 20%; + margin-left: 45%; + bottom: 20px; + border:none; + box-shadow: none; + width: 130px; + height: 40px; + line-height: 42px; + -webkit-perspective: 230px; + perspective: 230px; + } + .btn-12 span { + background: rgb(44, 0, 238); + background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); + display: block; + position: absolute; + width: 130px; + height: 40px; + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), + 7px 7px 20px 0px rgba(0,0,0,.1), + 4px 4px 5px 0px rgba(0,0,0,.1); + border-radius: 5px; + margin:0; + text-align: center; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: all .3s; + transition: all .3s; + } + .btn-12 span:nth-child(1) { + box-shadow: + -7px -7px 20px 0px #fff9, + -4px -4px 5px 0px #fff9, + 7px 7px 20px 0px #0002, + 4px 4px 5px 0px #0001; + -webkit-transform: rotateX(90deg); + -moz-transform: rotateX(90deg); + transform: rotateX(90deg); + -webkit-transform-origin: 50% 50% -20px; + -moz-transform-origin: 50% 50% -20px; + transform-origin: 50% 50% -20px; + } + .btn-12 span:nth-child(2) { + -webkit-transform: rotateX(0deg); + -moz-transform: rotateX(0deg); + transform: rotateX(0deg); + -webkit-transform-origin: 50% 50% -20px; + -moz-transform-origin: 50% 50% -20px; + transform-origin: 50% 50% -20px; + } + .btn-12:hover span:nth-child(1) { + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), + 7px 7px 20px 0px rgba(0,0,0,.1), + 4px 4px 5px 0px rgba(0,0,0,.1); + -webkit-transform: rotateX(0deg); + -moz-transform: rotateX(0deg); + transform: rotateX(0deg); + } + .btn-12:hover span:nth-child(2) { + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), + 7px 7px 20px 0px rgba(0,0,0,.1), + 4px 4px 5px 0px rgba(0,0,0,.1); + color: transparent; + -webkit-transform: rotateX(-90deg); + -moz-transform: rotateX(-90deg); + transform: rotateX(-90deg); + } \ No newline at end of file diff --git a/public/Buttons/vikrantvikaasa27/index.html b/public/Buttons/vikrantvikaasa27/index.html new file mode 100644 index 000000000..eb9042ac1 --- /dev/null +++ b/public/Buttons/vikrantvikaasa27/index.html @@ -0,0 +1,13 @@ + + + + + + + Animated Buttons + + + + + + \ No newline at end of file