mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
54 lines
1.7 KiB
HTML
54 lines
1.7 KiB
HTML
<button>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M5 13c0-5.088 2.903-9.436 7-11.182C16.097 3.564 19 7.912 19 13c0 .823-.076 1.626-.22 2.403l1.94 1.832a.5.5 0 0 1 .095.603l-2.495 4.575a.5.5 0 0 1-.793.114l-2.234-2.234a1 1 0 0 0-.707-.293H9.414a1 1 0 0 0-.707.293l-2.234 2.234a.5.5 0 0 1-.793-.114l-2.495-4.575a.5.5 0 0 1 .095-.603l1.94-1.832C5.077 14.626 5 13.823 5 13zm1.476 6.696l.817-.817A3 3 0 0 1 9.414 18h5.172a3 3 0 0 1 2.121.879l.817.817.982-1.8-1.1-1.04a2 2 0 0 1-.593-1.82c.124-.664.187-1.345.187-2.036 0-3.87-1.995-7.3-5-8.96C8.995 5.7 7 9.13 7 13c0 .691.063 1.372.187 2.037a2 2 0 0 1-.593 1.82l-1.1 1.039.982 1.8zM12 13a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>
|
|
<p class="Click">Click</p>
|
|
<p class="OnHover">Thanks</p>
|
|
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by 1osm - Tags: button */
|
|
button {
|
|
width: 130px;
|
|
height: 45px;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
border-width: 10px;
|
|
background: linear-gradient(to right, #5f6d7c, #456b8b, #49a6fc);
|
|
border: none;
|
|
letter-spacing: 0.05em;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
button svg {
|
|
height: 40px;
|
|
width: 60px;
|
|
transform: translate(-30px,3px) rotate(90deg);
|
|
transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1)
|
|
}
|
|
|
|
button .Click {
|
|
transform: translate(20px,-33px);
|
|
font-size: 20px;
|
|
transition: 0.3s cubic-bezier(0.76, 0, 0.24, 1)
|
|
}
|
|
|
|
button .OnHover {
|
|
transform: translate(-15px,-56px);
|
|
font-size: 20px;
|
|
opacity: 0%;
|
|
transition: 0.3s cubic-bezier(0.76, 0, 0.24, 1)
|
|
}
|
|
|
|
button:hover svg {
|
|
transform: translate(40px,3px) rotate(90deg);
|
|
}
|
|
|
|
button:hover .Click {
|
|
opacity: 0%;
|
|
}
|
|
|
|
button:hover .OnHover {
|
|
opacity: 100%;
|
|
}
|
|
</style>
|