mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
40 lines
No EOL
894 B
HTML
40 lines
No EOL
894 B
HTML
<button class="button">3D Button</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by seyed-mohsen-mousavi - Tags: 3d, black, button, dark, shadow, rotate, box-shadow */
|
|
.button {
|
|
background: rgba(55, 51, 51, 0.49);
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(3.7px);
|
|
-webkit-backdrop-filter: blur(3.7px);
|
|
outline: none;
|
|
border: none;
|
|
padding: 20px;
|
|
transform: rotate3d(1, 1, 1, 320deg);
|
|
filter: drop-shadow(1px 1px 8px black);
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: ease-in-out 0.5s;
|
|
}
|
|
.button:hover {
|
|
transform: rotate3d(1, 1, 1, 360deg);
|
|
animation: shadow 1s both;
|
|
}
|
|
@keyframes shadow {
|
|
0% {
|
|
filter: drop-shadow(1px 1px 8px black);
|
|
}
|
|
25% {
|
|
filter: drop-shadow(1px 1px 5px black);
|
|
}
|
|
50% {
|
|
filter: drop-shadow(1px 1px 2px black);
|
|
}
|
|
100% {
|
|
filter: drop-shadow(1px 1px 2px black);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|