mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
63 lines
1.7 KiB
HTML
63 lines
1.7 KiB
HTML
<button>
|
|
<div class="default-btn">
|
|
<svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="#FFF" height="20" width="20" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle r="3" cy="12" cx="12"></circle></svg>
|
|
<span>Quick View</span>
|
|
</div>
|
|
<div class="hover-btn">
|
|
<svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="#ffd300" height="20" width="20" viewBox="0 0 24 24"><circle r="1" cy="21" cx="9"></circle><circle r="1" cy="21" cx="20"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
|
|
<span>Shop Now</span>
|
|
</div>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by barisdogansutcu - Tags: button, hover, shop */
|
|
button {
|
|
position: relative;
|
|
overflow: hidden;
|
|
outline: none;
|
|
cursor: pointer;
|
|
border-radius: 50px;
|
|
background-color: hsl(255deg 50% 40%);
|
|
border: solid 4px hsl(50deg 100% 50%);
|
|
font-family: inherit;
|
|
}
|
|
|
|
.default-btn,.hover-btn {
|
|
background-color: hsl(255deg 50% 40%);
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 15px 20px;
|
|
border-radius: 50px;
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
transition: all .3s ease;
|
|
}
|
|
|
|
.hover-btn {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-color: hsl(255deg 50% 49%);
|
|
transform: translate(0%,100%);
|
|
}
|
|
|
|
.default-btn span {
|
|
color: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
.hover-btn span {
|
|
color: hsl(50deg 100% 50%);
|
|
}
|
|
|
|
button:hover .default-btn {
|
|
transform: translate(0%,-100%);
|
|
}
|
|
|
|
button:hover .hover-btn {
|
|
transform: translate(0%,0%);
|
|
}
|
|
</style>
|