mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
140 lines
2.5 KiB
HTML
140 lines
2.5 KiB
HTML
<button>
|
|
<span>View more</span>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by roroland - Tags: button */
|
|
button {
|
|
--fs: 1.25em;
|
|
--col1: honeydew;
|
|
--col2: rgba(240, 128, 128, 0.603);
|
|
--col3: indianred;
|
|
--col4: maroon;
|
|
--pd: .5em .65em;
|
|
display: grid;
|
|
align-content: baseline;
|
|
appearance: none;
|
|
border: 0;
|
|
grid-template-columns: min-content 1fr;
|
|
padding: var(--pd);
|
|
font-size: var(--fs);
|
|
color: var(--col1);
|
|
background-color: var(--col3);
|
|
border-radius: 6px;
|
|
text-shadow: 1px 1px var(--col4);
|
|
box-shadow: inset -2px 1px 1px var(--col2),
|
|
inset 2px 1px 1px var(--col2);
|
|
position: relative;
|
|
transition: all .75s ease-out;
|
|
transform-origin: center;
|
|
}
|
|
|
|
button:hover {
|
|
color: var(--col4);
|
|
box-shadow: inset -2px 1px 1px var(--col2),
|
|
inset 2px 1px 1px var(--col2),
|
|
inset 0px -2px 20px var(--col4),
|
|
0px 20px 30px var(--col3),
|
|
0px -20px 30px var(--col2),
|
|
1px 2px 20px var(--col4);
|
|
text-shadow: 1px 1px var(--col2);
|
|
}
|
|
|
|
button:active {
|
|
animation: offset 1s ease-in-out infinite;
|
|
outline: 2px solid var(--col2);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
button::after,
|
|
button::before {
|
|
content: '';
|
|
align-self: center;
|
|
justify-self: center;
|
|
height: .5em;
|
|
margin: 0 .5em;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
opacity: 1;
|
|
}
|
|
|
|
button::after {
|
|
position: relative;
|
|
border: 2px solid var(--col4);
|
|
border-radius: 50%;
|
|
transition: all .5s ease-out;
|
|
height: .1em;
|
|
width: .1em;
|
|
}
|
|
|
|
button:hover::after {
|
|
border: 2px solid var(--col3);
|
|
transform: rotate(-120deg) translate(10%, 140%);
|
|
}
|
|
|
|
button::before {
|
|
border-radius: 50% 0%;
|
|
border: 4px solid var(--col4);
|
|
box-shadow: inset 1px 1px var(--col2);
|
|
transition: all 1s ease-out;
|
|
transform: rotate(45deg);
|
|
height: .45em;
|
|
width: .45em;
|
|
}
|
|
|
|
button:hover::before {
|
|
border-radius: 50%;
|
|
border: 4px solid var(--col1);
|
|
transform: scale(1.25) rotate(0deg);
|
|
animation: blink 1.5s ease-out 1s infinite alternate;
|
|
}
|
|
|
|
button:hover > span {
|
|
filter: contrast(150%);
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% {
|
|
transform: scale(1, 1) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
5% {
|
|
transform: scale(1.5, .1) skewX(10deg);
|
|
opacity: .5;
|
|
}
|
|
|
|
10%,
|
|
35% {
|
|
transform: scale(1, 1) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
40% {
|
|
transform: scale(1.5, .1) skewX(10deg);
|
|
opacity: .25;
|
|
}
|
|
|
|
45%,
|
|
100% {
|
|
transform: scale(1, 1) skewX(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes offset {
|
|
50% {
|
|
outline-offset: .15em;
|
|
outline-color: var(--col1);
|
|
}
|
|
|
|
55% {
|
|
outline-offset: .1em;
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
80%,
|
|
100% {
|
|
outline-offset: 0;
|
|
}
|
|
}
|
|
</style>
|