mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
49 lines
1.5 KiB
HTML
49 lines
1.5 KiB
HTML
<button class="button">
|
|
<span>Add to cart</span>
|
|
<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <defs> </defs> <g id="cart"> <circle r="1.91" cy="20.59" cx="10.07" class="cls-1"></circle> <circle r="1.91" cy="20.59" cx="18.66" class="cls-1"></circle> <path d="M.52,1.5H3.18a2.87,2.87,0,0,1,2.74,2L9.11,13.91H8.64A2.39,2.39,0,0,0,6.25,16.3h0a2.39,2.39,0,0,0,2.39,2.38h10" class="cls-1"></path> <polyline points="7.21 5.32 22.48 5.32 22.48 7.23 20.57 13.91 9.11 13.91" class="cls-1"></polyline> </g> </g></svg>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by Df12345677 - Tags: button, animated, add */
|
|
.button {
|
|
height: 60px;
|
|
width: 200px;
|
|
background-color: #132233;
|
|
border: 2px solid rgb(182, 128, 128);
|
|
color: #eee;
|
|
transition: .6s;
|
|
font-size: 15px;
|
|
border-radius: 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* padding: 20px; */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.button span {
|
|
transform: translateX(10px);
|
|
transition: .5s;
|
|
}
|
|
|
|
.button svg {
|
|
transform: translateX(-300px);
|
|
transition: .6s;
|
|
z-index: 3;
|
|
height: 20px;
|
|
}
|
|
|
|
.button:hover {
|
|
width: 60px;
|
|
background-color: rgba(51, 34, 51, 0.815);
|
|
box-shadow: 20px 20px 96px #bebebe,-20px -20px 96px #ffffff;
|
|
}
|
|
|
|
.button:hover svg {
|
|
transform: translateX(-5px);
|
|
}
|
|
|
|
.button:hover span {
|
|
transform: translateY(70px);
|
|
font-size: .1rem;
|
|
}
|
|
</style>
|