#e8e8e8
1.card { 2 --main-focus: #2d8cf0; 3 --font-color: #323232; 4 --font-color-sub: #666; 5 --bg-color: #fff; 6 --main-color: #323232; 7 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 8 width: 150px; 9 height: 200px; 10 background: var(--bg-color); 11 border: 2px solid var(--main-color); 12 box-shadow: 4px 4px var(--main-color); 13 border-radius: 5px; 14 padding: 10px; 15 display: flex; 16 flex-direction: column; 17} 18 19.card-content-wrapper { 20 transform: translateY(10px); 21 display: flex; 22 flex-direction: column; 23 gap: 5px; 24 transition: all 0.7s; 25} 26 27.card-title { 28 letter-spacing: 3px; 29 font-size: 20px; 30 font-weight: 700; 31 color: var(--font-color); 32} 33 34.card-price { 35 letter-spacing: 2px; 36 font-size: 20px; 37 color: var(--font-color); 38 font-weight: 700; 39} 40 41.card-price span { 42 font-size: 15px; 43 color: var(--font-color-sub); 44 font-weight: 500; 45} 46 47.card-subtitle { 48 letter-spacing: 2px; 49 font-size: 17px; 50 color: var(--main-focus); 51 font-weight: 500; 52} 53 54.card-benefits { 55 font-size: 15px; 56 padding-left: 20px; 57 color: var(--font-color); 58} 59 60.card-btn { 61 cursor: pointer; 62 width: 100px; 63 padding: 5px; 64 background: var(--main-focus); 65 border: none; 66 border-radius: 5px; 67 margin: 0 auto; 68 transform: translateY(30px); 69 color: var(--bg-color); 70 font-weight: 500; 71 font-size: 12px; 72 letter-spacing: 0.7px; 73 opacity: 0; 74 transition: all 0.7s; 75} 76 77.card:hover > .card-btn { 78 opacity: 1; 79 transform: translateY(17px); 80} 81 82.card-btn:hover { 83 font-weight: 700; 84 letter-spacing: 1px; 85} 86 87.card:hover > .card-content-wrapper { 88 transform: translateY(5px); 89}
Comments
Variations
1 MIT License