Card by zebra76966
#212121
1.card { 2 width: 290px; 3 height: 64px; 4 background: rgb(255, 255, 255); 5 display: flex; 6 align-items: center; 7 justify-content: space-between; 8 padding: 10px; 9 border-radius: 20px; 10 position: relative; 11 border: 2px solid transparent; 12 transition: all 0.5s ease-in-out; 13} 14 15.card:focus-within { 16 background-color: rgba(17, 17, 17, 0.5); 17 backdrop-filter: blur(10px); 18 border: 2px solid rgb(27, 27, 27); 19 box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); 20} 21 22.card button { 23 font-size: 34px; 24 background-color: transparent; 25 width: 50px; 26 padding: 7px; 27 height: 50px; 28 border-radius: 100%; 29 transition: all 0.2s ease-in; 30 border: 0; 31 cursor: pointer; 32} 33 34.card button:focus { 35 background-color: rgb(255, 255, 255); 36 margin-bottom: 50%; 37} 38 39.card::hover { 40} 41 42
1.5K views
1.5K views
MIT License