mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
46 lines
918 B
HTML
46 lines
918 B
HTML
<button class="btn">
|
|
<svg class="icon" width="30" height="30" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path></svg>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by Peary74 - Tags: button, hover, active */
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 10px;
|
|
border: none;
|
|
background-color: transparent;
|
|
position: relative;
|
|
}
|
|
|
|
.btn:hover > .icon {
|
|
transform: scale(1.2);
|
|
cursor: pointer;
|
|
transition: .2s linear;
|
|
}
|
|
|
|
.btn:focus > .icon {
|
|
fill: #fd1853;
|
|
animation: grosseur .2s linear;
|
|
}
|
|
|
|
@keyframes grosseur {
|
|
0% {
|
|
width: 50px;
|
|
height: 50px;
|
|
fill: #fd1853;
|
|
}
|
|
|
|
100% {
|
|
width: 30px;
|
|
height: 30px;
|
|
fill: #fd1853;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|