mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
79 lines
1.7 KiB
HTML
79 lines
1.7 KiB
HTML
<button class="button">
|
|
<span>
|
|
<svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M9.145 18.29c-5.042 0-9.145-4.102-9.145-9.145s4.103-9.145 9.145-9.145 9.145 4.103 9.145 9.145-4.102 9.145-9.145 9.145zm0-15.167c-3.321 0-6.022 2.702-6.022 6.022s2.702 6.022 6.022 6.022 6.023-2.702 6.023-6.022-2.702-6.022-6.023-6.022zm9.263 12.443c-.817 1.176-1.852 2.188-3.046 2.981l5.452 5.453 3.014-3.013-5.42-5.421z"></path></svg>
|
|
</span>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by gharsh11032000 - Tags: button, search, hover effect */
|
|
.button {
|
|
position: relative;
|
|
border: none;
|
|
background-color: white;
|
|
color: #212121;
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
gap: 10px;
|
|
border-radius: 10px;
|
|
transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.button span {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.button::before {
|
|
content: "";
|
|
position: absolute;
|
|
background-color: palevioletred;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0%;
|
|
bottom: 0%;
|
|
transform: translate(-100%, 100%);
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.button svg {
|
|
fill: palevioletred;
|
|
transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
|
|
}
|
|
|
|
.button:hover::before {
|
|
animation: shakeBack 0.6s forwards;
|
|
}
|
|
|
|
.button:hover svg {
|
|
fill: white;
|
|
scale: 1.3;
|
|
}
|
|
|
|
.button:active {
|
|
box-shadow: none;
|
|
}
|
|
|
|
@keyframes shakeBack {
|
|
0% {
|
|
transform: translate(-100%, 100%);
|
|
}
|
|
|
|
50% {
|
|
transform: translate(20%, -20%);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0%, 0%);
|
|
}
|
|
}
|
|
|
|
</style>
|