Button by Julian956
#212121
1.btn-cart { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 width: 50px; 6 height: 50px; 7 border-radius: 10px; 8 border: none; 9 background-color: transparent; 10 position: relative; 11} 12 13.btn-cart::after { 14 content: attr(data-quantity); 15 width: fit-content; 16 height: fit-content; 17 position: absolute; 18 font-size: 15px; 19 color: white; 20 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 21 opacity: 0; 22 visibility: hidden; 23 transition: .2s linear; 24 top: 115%; 25} 26 27.icon-cart { 28 width: 24.38px; 29 height: 30.52px; 30 transition: .2s linear; 31} 32 33.icon-cart path { 34 fill: rgb(240, 8, 8); 35 transition: .2s linear; 36} 37 38.btn-cart:hover > .icon-cart { 39 transform: scale(1.2); 40} 41 42.btn-cart:hover > .icon-cart path { 43 fill: rgb(186, 34, 233); 44} 45 46.btn-cart:hover::after { 47 visibility: visible; 48 opacity: 1; 49 top: 105%; 50} 51 52.quantity { 53 display: none; 54} 55
1.9K views
1.9K views
MIT License