Card by wizard503
This card was created for Open-Source CSS Odyssey
#212121
1.card { 2 overflow: hidden; 3 background: #333; 4 padding: 30px; 5 color: white; 6 box-shadow: 0px 60px 60px -60px rgba(0,30,255,0.5),-2px -2px 10px 4px rgba(0, 0, 0, 0.5); 7} 8 9.card:hover { 10 transform: perspective(250px) rotateX(10deg); 11} 12 13.card::before { 14 content: ''; 15 z-index: -1; 16 position: absolute; 17 bottom: 0; 18 left: 0; 19 height: 100%; 20 width: 100%; 21 background-image: linear-gradient(to bottom, transparent 10%,rgba(0,0,0,0.5) 50%,rgba(0,0,0) 90%); 22 transition: all .3 ease; 23 opacity: 0; 24} 25 26.card:hover::before { 27 opacity: 1; 28} 29 30.card::after { 31 content: ""; 32 position: absolute; 33 left: -2em; 34 width: 5em; 35 height: 175%; 36 top: -15em; 37 rotate: 45deg; 38 opacity: 0; 39 z-index: 1; 40 transform: perspective(250px); 41 transition: transform .7s ease-in-out; 42 background: linear-gradient(to right, transparent 1%, rgba(255, 255, 255, 0.1) 40%,rgba(255, 255, 255, 0.1) 60% , transparent 100%); 43} 44 45.card:hover::after { 46 overflow: auto; 47 opacity: 1; 48 transform: translateX(35em); 49} 50 51.card button { 52 --border-width: 4px; 53 appearance: none; 54 position: relative; 55 margin-top: 10%; 56 padding: 1em 2em; 57 border: 1px; 58 width: 96%; 59 background-color: #212121; 60 border-radius: 100px; 61 font-size: 15px; 62 font-weight: 900; 63 color: #fff; 64 z-index: 2; 65} 66 67button::after { 68 --m-i: linear-gradient(#000, #000); 69 --m-o: content-box, padding-box; 70 content: ""; 71 position: absolute; 72 left: -0.2em; 73 top: -0.2em; 74 width: 99%; 75 height: 95%; 76 padding: var(--border-width); 77 background-image: conic-gradient( 78 #488cfb, 79 #29dbbc, 80 #ddf505, 81 #ff9f0e, 82 #e440bb, 83 #655adc, 84 #488cfb 85 ); 86 mask-image: var(--m-i), var(--m-i); 87 -webkit-mask-clip: var(--m-o); 88 mask-composite: exclude; 89 border-radius: 100px; 90} 91 92button:hover::after { 93 opacity: 0; 94} 95 96.card button:hover { 97 color: #fff; 98 font-weight: 900; 99 font-size: 1em; 100 text-transform: uppercase; 101 transform: perspective(50px) rotateX(-10deg); 102 background-image: linear-gradient(to left bottom, 103 #488dfbe1, 104 #29dbbddc, 105 #ddf505e1, 106 #ff9f0edc, 107 #e440bbd0, 108 #488dfbd0); 109} 110 111.heading,.content .item { 112 padding: 6px; 113} 114 115.heading { 116 --text-stroke-color: rgb(255, 0, 98); 117 text-decoration: none; 118 -webkit-text-stroke: 1px var(--text-stroke-color); 119} 120 121.item--create:hover { 122 color: #ffee00; 123 font-weight: 800; 124} 125 126.item--post:hover { 127 color: #00eeff; 128 font-weight: 800; 129} 130 131.item--inspire:hover { 132 color: #ff00b3; 133 font-weight: 800; 134}
480 views
480 views
MIT License