mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
60 lines
1.5 KiB
HTML
60 lines
1.5 KiB
HTML
<button class="btn">
|
|
<svg viewBox="0 0 17.503 15.625" height="20.625" width="20.503" xmlns="http://www.w3.org/2000/svg" class="icon">
|
|
<path transform="translate(0 0)" d="M8.752,15.625h0L1.383,8.162a4.824,4.824,0,0,1,0-6.762,4.679,4.679,0,0,1,6.674,0l.694.7.694-.7a4.678,4.678,0,0,1,6.675,0,4.825,4.825,0,0,1,0,6.762L8.752,15.624ZM4.72,1.25A3.442,3.442,0,0,0,2.277,2.275a3.562,3.562,0,0,0,0,5l6.475,6.556,6.475-6.556a3.563,3.563,0,0,0,0-5A3.443,3.443,0,0,0,12.786,1.25h-.01a3.415,3.415,0,0,0-2.443,1.038L8.752,3.9,7.164,2.275A3.442,3.442,0,0,0,4.72,1.25Z" id="Fill"></path>
|
|
</svg>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by boryanakrasteva - Tags: button, like */
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 10px;
|
|
border: none;
|
|
background-color: transparent;
|
|
position: relative;
|
|
}
|
|
|
|
.btn::after {
|
|
content: 'like';
|
|
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 {
|
|
width: 30px;
|
|
height: 30px;
|
|
transition: .2s linear;
|
|
}
|
|
|
|
.icon path {
|
|
fill: white;
|
|
transition: .2s linear;
|
|
}
|
|
|
|
.btn:hover > .icon {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.btn:hover > .icon path {
|
|
fill: rgb(177, 139, 189);
|
|
}
|
|
|
|
.btn:hover::after {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
top: 105%;
|
|
}
|
|
|
|
|
|
</style>
|