mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
48 lines
1 KiB
HTML
48 lines
1 KiB
HTML
<button class="button">
|
|
<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM128,72a12,12,0,1,0-12-12A12,12,0,0,0,128,72Zm0,112a12,12,0,1,0,12,12A12,12,0,0,0,128,184Z"></path></svg>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by sammykINC - Tags: button, menu, animated, settings */
|
|
/* works only on a dark background with these paremeters*/
|
|
|
|
.button {
|
|
border-radius: 50%;
|
|
border: none;
|
|
display: flex;
|
|
place-items: center;
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button > svg {
|
|
border-radius: inherit;
|
|
padding: 0.5rem;
|
|
fill: #fff;
|
|
/* SVG color */
|
|
width: 38px;
|
|
/* default width 32px */
|
|
height: 38px;
|
|
/* default height 32px */
|
|
}
|
|
|
|
.button > svg:active {
|
|
background-color: rgba(65, 65, 65, 0.5);
|
|
}
|
|
|
|
.button > svg:not(:active) {
|
|
animation: fadeOut 0.9s;
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0% {
|
|
outline: 1px solid rgba(90, 90, 90, 0.5);
|
|
/* If you use border it will take space inside and slightly move the SVG */
|
|
}
|
|
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
</style>
|