Card by JOBOYA
This card was created for Open-Source CSS Odyssey
#212121
1.card { 2 border-radius: 10px; 3 box-shadow: 0 4px 6px rgba(0,0,0,.1); 4 margin: 20px; 5 max-width: 400px; 6 padding: 20px; 7 position: relative; 8 transition: 0.3s 9} 10 11.card:hover { 12 transform: scale(1.05); 13 box-shadow: 0 10px 20px rgba(0,0,0,.2) 14} 15 16.heading { 17 font-size: 24px; 18 font-weight: 700; 19 margin-bottom: 15px; 20 text-align: center; 21 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); 22} 23 24.heading span { 25 color: #3498db 26} 27 28.content { 29 display: flex; 30 justify-content: space-around; 31 margin-bottom: 20px 32} 33 34.item { 35 align-items: center; 36 display: flex; 37 flex-direction: column; 38 font-size: 14px; 39 text-align: center; 40 transition: 0.3s; 41} 42 43.item:hover { 44 animation: slotMachine 0.8s ease-in-out forwards 45} 46 47@keyframes slotMachine { 48 0% { 49 transform: translateY(0); 50 opacity: 1 51 } 52 53 25% { 54 transform: translateY(-100%); 55 opacity: 0 56 } 57 58 50% { 59 transform: translateY(100%); 60 opacity: 0 61 } 62 63 75% { 64 transform: translateY(0); 65 opacity: 1 66 } 67 68 100% { 69 transform: translateY(0); 70 opacity: 1 71 } 72} 73 74.content .item { 75 display: flex; 76 align-items: center; 77 justify-content: center; 78 flex-direction: column; 79 text-transform: uppercase; 80 font-weight: 700 81} 82 83.content .item span { 84 margin-top: 8px; 85 font-size: 14px; 86 color: rgb(111,110,110); 87 font-weight: 400; 88 cursor: pointer 89} 90 91.heading span { 92 display: inline-block; 93 background-image: linear-gradient(to right,#3498db,#5a5aeb,#7d44f0,#9a16ec); 94 background-clip: text; 95 color: transparent 96} 97 98.item svg { 99 fill: #3498db; 100 height: 48px; 101 margin-bottom: 5px; 102 width: 48px; 103} 104 105.item--create, 106.item--post, 107.item--inspire { 108 color: #4d34db !important; 109} 110 111button { 112 position: relative; 113 overflow: hidden; 114 background-color: #3498db; 115 border: none; 116 border-radius: 5px; 117 color: #fff; 118 cursor: pointer; 119 font-size: 16px; 120 font-weight: 600; 121 margin-top: 10px; 122 padding: 10px 20px; 123 text-align: center; 124 text-transform: uppercase; 125 transition: 0.3s; 126 width: 100%; 127 z-index: 1 128} 129 130button::after { 131 content: ""; 132 position: absolute; 133 top: 0; 134 left: 0; 135 width: 100%; 136 height: 100%; 137 background-image: linear-gradient(to right,#3498db,#5a5aeb,#7d44f0,#9a16ec); 138 opacity: 0; 139 z-index: -1; 140 transition: opacity 0.3s 141} 142 143button:hover::after { 144 opacity: 1 145} 146
484 views
484 views
MIT License