#e8e8e8
1.cartBtn { 2 width: 155px; 3 height: 50px; 4 border: none; 5 border-radius: 0px; 6 display: flex; 7 align-items: center; 8 justify-content: center; 9 gap: 7px; 10 color: white; 11 font-weight: 500; 12 position: relative; 13 background-color: rgb(29, 29, 29); 14 box-shadow: 0 20px 30px -7px rgba(27, 27, 27, 0.219); 15 transition: all 0.3s ease-in-out; 16 cursor: pointer; 17 overflow: hidden; 18} 19 20.cart { 21 z-index: 2; 22} 23 24.cartBtn:active { 25 transform: scale(0.96); 26} 27 28.product { 29 position: absolute; 30 width: 12px; 31 border-radius: 3px; 32 content: ""; 33 left: 23px; 34 bottom: 23px; 35 opacity: 0; 36 z-index: 1; 37 fill: rgb(211, 211, 211); 38} 39 40.cartBtn:hover .product { 41 animation: slide-in-top 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; 42} 43 44@keyframes slide-in-top { 45 0% { 46 transform: translateY(-30px); 47 opacity: 1; 48 } 49 50 100% { 51 transform: translateY(0) rotate(-90deg); 52 opacity: 1; 53 } 54} 55 56.cartBtn:hover .cart { 57 animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; 58} 59 60@keyframes slide-in-left { 61 0% { 62 transform: translateX(-10px); 63 opacity: 0; 64 } 65 66 100% { 67 transform: translateX(0); 68 opacity: 1; 69 } 70}
851 views
851 views
Comments
MIT License