mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
46 lines
No EOL
914 B
HTML
46 lines
No EOL
914 B
HTML
<div class="container">
|
|
<button class="button">Hover me</button>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by Spacious74 - Tags: minimalist, gradient, button, hover, dark, gradients, border, click effect */
|
|
button {
|
|
font-size: 1.4em;
|
|
padding: 0.6em 0.8em;
|
|
border-radius: 0.5em;
|
|
border: none;
|
|
background-color: #000;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
box-shadow: 2px 2px 3px #000000b4;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
padding: 3px;
|
|
background: linear-gradient(90deg, #03a9f4, #f441a5);
|
|
border-radius: 0.9em;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.container::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
margin: auto;
|
|
border-radius: 0.9em;
|
|
z-index: -10;
|
|
filter: blur(0);
|
|
transition: filter 0.4s ease;
|
|
}
|
|
|
|
.container:hover::before {
|
|
background: linear-gradient(90deg, #03a9f4, #f441a5);
|
|
filter: blur(1.2em);
|
|
}
|
|
.container:active::before {
|
|
filter: blur(0.2em);
|
|
}
|
|
|
|
</style>
|
|
|