Card by VD232004
#e8e8e8
1.card { 2 width: 190px; 3 height: 254px; 4 border-radius: 20px; 5 background: #f5f5f5; 6 position: relative; 7 padding: 1.8rem; 8 border: 2px solid #c3c6ce; 9 -webkit-transition: 0.5s ease-out; 10 transition: 0.5s ease-out; 11 overflow: visible; 12} 13 14.card-details { 15 color: rgb(162, 0, 255); 16 height: 100%; 17 gap: .5em; 18 display: grid; 19 place-content: center; 20 font-family: 'Courier New', Courier, monospace; 21} 22 23.card-button { 24 text-decoration: none; 25 text-align: center; 26 -webkit-transform: translate(-50%, 125%); 27 -ms-transform: translate(-50%, 125%); 28 transform: translate(-50%, 125%); 29 width: 70%; 30 border-radius: 1rem; 31 border: none; 32 background-color: #6c00f8; 33 color: #fff; 34 font-size: 1rem; 35 padding: .5rem 1rem; 36 position: absolute; 37 left: 50%; 38 bottom: 0; 39 opacity: 0; 40 -webkit-transition: 0.3s ease-out; 41 transition: 0.3s ease-out; 42 cursor: pointer; 43 font-family: 'Courier New', Courier, monospace; 44} 45 46.text-body { 47 color: rgb(134, 134, 134); 48} 49 50/*Text*/ 51.text-title { 52 font-size: 1.5em; 53 font-weight: bold; 54} 55 56/*Hover*/ 57.card:hover { 58 border-color: #6c00f8; 59 -webkit-box-shadow: 10px 5px 18px 0 rgba(255, 255, 255, 0.877); 60 box-shadow: 10px 5px 18px 0 rgba(255, 255, 255, 0.877); 61} 62 63.card:hover .card-button { 64 -webkit-transform: translate(-50%, 50%); 65 -ms-transform: translate(-50%, 50%); 66 transform: translate(-50%, 50%); 67 opacity: 1; 68}
1.4K views
1.4K views
MIT License