Card by MRez321
This card was created for Open-Source CSS Odyssey
#212121
1.card { 2 position: relative; 3 width: 20rem; 4 height: 30rem; 5 border-radius: 1rem; 6 padding: 1rem; 7 isolation: isolate; 8 display: flex; 9 justify-content: center; 10 align-items: center; 11 flex-direction: column; 12 background-color: #393E46; 13 background-image: linear-gradient(135deg, #222831 0%, #393E46 100%); 14} 15 16.card:hover::before { 17 content: ''; 18 z-index: -1; 19 position: absolute; 20 inset: 0; 21 border-radius: inherit; 22 opacity: .3; 23 background-image: linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%); 24 background-size: 400% 400%; 25 animation: gradient 5s ease infinite; 26} 27 28@keyframes gradient { 29 0% { 30 background-position: 0% 50%; 31 } 32 33 50% { 34 background-position: 100% 50%; 35 } 36 37 100% { 38 background-position: 0% 50%; 39 } 40} 41 42.heading { 43 background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%); 44 -webkit-background-clip: text; 45 -webkit-text-stroke: 4px transparent; 46 color: #232d2d; 47 font-size: 1.4rem; 48} 49 50.heading span { 51 display: block; 52 text-align: center; 53 font-size: 3.5rem; 54 filter: drop-shadow(0 2px 3px black); 55 background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%); 56 -webkit-background-clip: text; 57 -webkit-text-fill-color: transparent; 58 animation: pulsing-span 1s infinite both linear; 59} 60 61@keyframes pulsing-span { 62 0% { 63 transform: scale(1); 64 } 65 66 50% { 67 transform: scale(.9); 68 } 69 70 100% { 71 transform: scale(1); 72 } 73} 74 75.content { 76 width: 90%; 77 height: 14rem; 78 margin: 1rem 0; 79} 80 81.item { 82 margin: 1.4rem 1rem; 83 padding: .3rem; 84 font-size: 1.5rem; 85 border-bottom: solid; 86} 87 88.item span { 89 display: inline-block; 90} 91 92.item:hover span { 93 transition: 200ms; 94 transform: translate(32px,0); 95} 96 97.item--create { 98 color: #00abfb; 99} 100 101.item--post { 102 color: #2fbdff; 103} 104 105.item--inspire { 106 color: #62cdff; 107} 108 109.item:hover svg { 110 transform: scale(1.5); 111 transition: transform 300ms; 112 filter: drop-shadow(0 2px 5px #D5DEF5); 113} 114 115button { 116 position: relative; 117 cursor: pointer; 118 width: 12em; 119 height: 4em; 120 font-size: 14px; 121 font-weight: 900; 122 color: #272424; 123 background-color: #dcdada; 124 transition: 200ms; 125} 126 127button:hover { 128 filter: hue-rotate(30deg); 129 animation: pulse 1s infinite; 130} 131 132@keyframes pulse { 133 0% { 134 box-shadow: 0 0 0 0 rgba(110, 190, 251, 0.5); 135 } 136 137 100% { 138 box-shadow: 0 0 0 20px #0000; 139 } 140} 141 142::before, 143::after { 144 content: ''; 145 position: absolute; 146} 147 148button::before, 149button::after { 150 width: 0%; 151 height: 0%; 152 opacity: 0; 153 transition: width 0.2s 0.15s linear, height 0.15s linear, opacity 0s 0.35s; 154} 155 156button::before { 157 top: 0; 158 right: 0; 159 border-top: 4px solid #00abfb; 160 border-left: 4px solid #548CFF; 161} 162 163button::after { 164 bottom: 0; 165 left: 0; 166 border-bottom: 4px solid #00abfb; 167 border-right: 4px solid #548CFF; 168} 169 170button:hover::before, 171button:hover::after { 172 width: 98%; 173 height: 90%; 174 opacity: 1; 175 transition: width 0.2s linear, height 0.15s 0.2s linear, opacity 0s; 176}
491 views
491 views
MIT License