mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
65 lines
1.7 KiB
HTML
65 lines
1.7 KiB
HTML
<button data-quantity="0" class="btn-cart">
|
|
<svg class="icon-cart" viewBox="0 0 24.38 30.52" height="30.52" width="24.38" xmlns="http://www.w3.org/2000/svg">
|
|
<title>icon-cart</title>
|
|
<path transform="translate(-3.62 -0.85)" d="M28,27.3,26.24,7.51a.75.75,0,0,0-.76-.69h-3.7a6,6,0,0,0-12,0H6.13a.76.76,0,0,0-.76.69L3.62,27.3v.07a4.29,4.29,0,0,0,4.52,4H23.48a4.29,4.29,0,0,0,4.52-4ZM15.81,2.37a4.47,4.47,0,0,1,4.46,4.45H11.35a4.47,4.47,0,0,1,4.46-4.45Zm7.67,27.48H8.13a2.79,2.79,0,0,1-3-2.45L6.83,8.34h3V11a.76.76,0,0,0,1.52,0V8.34h8.92V11a.76.76,0,0,0,1.52,0V8.34h3L26.48,27.4a2.79,2.79,0,0,1-3,2.44Zm0,0"></path>
|
|
</svg>
|
|
<span class="quantity"></span>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by Julian956 - Tags: button, buy now, cart */
|
|
.btn-cart {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 10px;
|
|
border: none;
|
|
background-color: transparent;
|
|
position: relative;
|
|
}
|
|
|
|
.btn-cart::after {
|
|
content: attr(data-quantity);
|
|
width: fit-content;
|
|
height: fit-content;
|
|
position: absolute;
|
|
font-size: 15px;
|
|
color: white;
|
|
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: .2s linear;
|
|
top: 115%;
|
|
}
|
|
|
|
.icon-cart {
|
|
width: 24.38px;
|
|
height: 30.52px;
|
|
transition: .2s linear;
|
|
}
|
|
|
|
.icon-cart path {
|
|
fill: rgb(240, 8, 8);
|
|
transition: .2s linear;
|
|
}
|
|
|
|
.btn-cart:hover > .icon-cart {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.btn-cart:hover > .icon-cart path {
|
|
fill: rgb(186, 34, 233);
|
|
}
|
|
|
|
.btn-cart:hover::after {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
top: 105%;
|
|
}
|
|
|
|
.quantity {
|
|
display: none;
|
|
}
|
|
|
|
</style>
|