mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
114 lines
No EOL
2.2 KiB
HTML
114 lines
No EOL
2.2 KiB
HTML
<div class="comment-react">
|
|
<button>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="22"
|
|
height="22"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M19.4626 3.99415C16.7809 2.34923 14.4404 3.01211 13.0344 4.06801C12.4578 4.50096 12.1696 4.71743 12 4.71743C11.8304 4.71743 11.5422 4.50096 10.9656 4.06801C9.55962 3.01211 7.21909 2.34923 4.53744 3.99415C1.01807 6.15294 0.221721 13.2749 8.33953 19.2834C9.88572 20.4278 10.6588 21 12 21C13.3412 21 14.1143 20.4278 15.6605 19.2834C23.7783 13.2749 22.9819 6.15294 19.4626 3.99415Z"
|
|
stroke="#707277"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
fill="#707277"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<span>14</span>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by TroyRandall - Tags: icon, button, switch, like, heart */
|
|
/* The switch - the box around the slider */
|
|
.comment-react {
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 5px;
|
|
background-color: #f1f1f1;
|
|
border-radius: 5px;
|
|
scale: 1.5;
|
|
width: 100px;
|
|
}
|
|
|
|
.comment-react button {
|
|
width: 35px;
|
|
height: 35px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: transparent;
|
|
border: 0;
|
|
outline: none;
|
|
}
|
|
|
|
.comment-react button:after {
|
|
content: "";
|
|
width: 40px;
|
|
height: 40px;
|
|
position: absolute;
|
|
left: -3px;
|
|
top: -3px;
|
|
background-color: #f5356e;
|
|
border-radius: 50%;
|
|
z-index: 0;
|
|
transform: scale(0);
|
|
}
|
|
|
|
.comment-react button svg {
|
|
position: relative;
|
|
z-index: 9;
|
|
}
|
|
|
|
.comment-react button:hover:after {
|
|
animation: ripple 0.6s ease-in-out forwards;
|
|
}
|
|
|
|
.comment-react button:hover svg {
|
|
fill: #f5356e;
|
|
}
|
|
|
|
.comment-react button:hover svg path {
|
|
stroke: #f5356e;
|
|
fill: #f5356e;
|
|
}
|
|
|
|
.comment-react hr {
|
|
width: 80%;
|
|
height: 1px;
|
|
background-color: #dfe1e6;
|
|
margin: auto;
|
|
border: 0;
|
|
}
|
|
|
|
.comment-react span {
|
|
height: 35px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: auto;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #707277;
|
|
padding-right: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
@keyframes ripple {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|