Oct 26, 20225.3K views
CSSAdd prefixes
1.card { 2 box-sizing: border-box; 3 width: 190px; 4 height: 254px; 5 background: rgba(217, 217, 217, 0.58); 6 border: 1px solid white; 7 box-shadow: 12px 17px 51px rgba(0, 0, 0, 0.22); 8 backdrop-filter: blur(6px); 9 border-radius: 17px; 10 text-align: center; 11 cursor: pointer; 12 transition: all 0.5s; 13 display: flex; 14 align-items: center; 15 justify-content: center; 16 user-select: none; 17 font-weight: bolder; 18} 19 20.card:hover { 21 border: 1px solid black; 22 transform: scale(1.05); 23} 24 25.card:active { 26 transform: scale(0.95) rotateZ(1.7deg); 27}
HTML
1<div class="card"> 2 Click me 3</div>