Card by roroland
This card was created for One <div> challenge
#212121
1.one-div { 2 --color1: #db41a5; 3 --color2: pink; 4 --color3: #fff; 5 --color4: #ffaae2; 6 --time: 5; 7 display: grid; 8 grid-template-columns: 1fr; 9 grid-template-rows: 1fr; 10 align-items: center; 11 justify-content: center; 12 padding: 1em; 13 width: auto; 14 height: 100%; 15 position: relative; 16 transition: all 1s ease-out; 17 transform: perspective(400px); 18 transform-style: preserve-3d; 19 z-index: 0; 20} 21 22.one-div:hover { 23 cursor: pointer; 24 filter: drop-shadow(0px 0px 100px var(--color2)); 25 scale: 1.2; 26} 27 28.one-div:hover::after { 29 scale: 0; 30 opacity: 0; 31} 32 33.one-div:hover::before { 34 color: var(--color4); 35 box-shadow: 0px 0px 20px 5px rgba(0,0,0, .5), 0px 3px 50px rgba(0,0,0, .15), inset 0 0 1px 1px #000; 36 text-shadow: 0 1px 5px #000; 37} 38 39.one-div:active { 40 transition: all .1s ease-out; 41 scale: .99; 42} 43 44.one-div:active::before { 45 transition: all .1s ease-out; 46 color: white; 47} 48 49.one-div::after, 50.one-div::before { 51 padding: 1em; 52 grid-column: 1/-1; 53 grid-row: 1 / 1; 54 position: relative; 55 transition: all 1s ease-out .3s; 56} 57 58.one-div::before { 59 animation: fade calc(var(--time) * 1s) ease-out infinite calc(var(--time) * .5s); 60 content: 'Single div button'; 61 border-radius: 4px; 62 background-image: linear-gradient(to bottom, var(--color1) 30%, var(--color2) 95%, var(--color3) 99%); 63} 64 65.one-div::after { 66 animation: rotate calc(var(--time) * 1s) ease-out infinite; 67 display: block; 68 width: calc(100% - 2rem); 69 outline-color: var(--color4); 70 outline-width: .5em; 71 outline-offset: .9em; 72 outline-style: solid; 73 content: ''; 74 z-index: -1; 75} 76 77@keyframes rotate { 78 0% { 79 rotate: x -90deg; 80 } 81 82 0%, 50% { 83 filter: blur(0px) drop-shadow(0px 0px 60px var(--color3)) opacity(100%); 84 } 85 86 100% { 87 rotate: x 90deg; 88 filter: blur(4px) drop-shadow(0px 0px 30px var(--color2)) opacity(80%); 89 } 90} 91 92@keyframes fade { 93 0%, 100% { 94 opacity: 1; 95 } 96 97 50% { 98 opacity: 0.9; 99 } 100}
758 views
758 views
MIT License