mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
40 lines
1.2 KiB
HTML
40 lines
1.2 KiB
HTML
<button class="btn">
|
|
<svg class="w-6 h-6" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="40" width="40">
|
|
<path d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" stroke-linejoin="round" stroke-linecap="round"></path>
|
|
</svg>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by ozgeozkaraa01 - Tags: button, hover button, 3d button */
|
|
.btn {
|
|
display: grid;
|
|
place-items: center;
|
|
background-color: #e2e8f0;
|
|
padding: 1.5em;
|
|
border-radius: 10px;
|
|
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
|
|
-6px -6px 10px -1px rgba(255,255,255,0.7);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: transform 0.5s;
|
|
}
|
|
|
|
.btn:hover {
|
|
box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
|
|
inset -4px -4px 6px -1px rgba(255,255,255,0.7),
|
|
-0.5px -0.5px 0px rgba(255,255,255,1),
|
|
0.5px 0.5px 0px rgba(0,0,0,0.15),
|
|
0px 12px 10px -10px rgba(0,0,0,0.05);
|
|
border: 1px solid rgba(0,0,0,0.1);
|
|
transform: translateY(0.5em);
|
|
}
|
|
|
|
.btn svg {
|
|
transition: transform 0.6s;
|
|
}
|
|
|
|
.btn:hover svg {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
|
|
</style>
|