mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
85 lines
1.9 KiB
HTML
85 lines
1.9 KiB
HTML
<button class="button__click">
|
|
<div class="button__click__background"></div>
|
|
Click me
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by EddyBel - Tags: gradient, button, click */
|
|
.button__click {
|
|
border: none;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
text-transform: uppercase;
|
|
transition: box-shadow 400ms;
|
|
padding: 0.7em 1.7em;
|
|
font-size: 1rem;
|
|
border-radius: 20px;
|
|
color: rgb(0, 0, 0, 0.75);
|
|
background: transparent;
|
|
transform: scale(1.1) perspective(500px) rotateX(15deg) rotateY(-10deg);
|
|
}
|
|
|
|
.button__click:hover {
|
|
animation: button__click__animation 5.5s infinite both;
|
|
}
|
|
|
|
.button__click__background {
|
|
transition: transform 1.5s;
|
|
z-index: -2;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 200%;
|
|
height: 200%;
|
|
animation: button__click__background 10s infinite;
|
|
background-color: #99fff8;
|
|
background-image: radial-gradient(at 89% 76%, hsla(13,63%,73%,1) 0px, transparent 50%),
|
|
radial-gradient(at 69% 38%, hsla(217,85%,71%,1) 0px, transparent 50%),
|
|
radial-gradient(at 12% 8%, hsla(214,70%,64%,1) 0px, transparent 50%),
|
|
radial-gradient(at 53% 10%, hsla(339,64%,65%,1) 0px, transparent 50%),
|
|
radial-gradient(at 5% 67%, hsla(212,74%,70%,1) 0px, transparent 50%);
|
|
}
|
|
|
|
.button__click::before {
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
background: rgba(255, 255, 255, 0.295);
|
|
}
|
|
|
|
.button__click:focus {
|
|
box-shadow: 0px 0px 0px 2px #000;
|
|
}
|
|
|
|
@keyframes button__click__animation {
|
|
0%, 100% {
|
|
transform: scale(1.1) perspective(500px) rotateX(15deg) rotateY(-10deg);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(0.9) perspective(500px) rotateX(-15deg) rotateY(15deg);
|
|
}
|
|
}
|
|
|
|
@keyframes button__click__background {
|
|
0%, 100% {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
50% {
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(0%) translateY(-50%);
|
|
}
|
|
}
|
|
</style>
|