mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
83 lines
2 KiB
HTML
83 lines
2 KiB
HTML
<button class="button">
|
|
<span>Not allowed!
|
|
</span>
|
|
<span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-miterlimit="2" stroke-linejoin="round" fill-rule="evenodd" clip-rule="evenodd"><path fill-rule="nonzero" d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 1.5c-4.69 0-8.497 3.807-8.497 8.497s3.807 8.498 8.497 8.498 8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497zm0 7.425 2.717-2.718c.146-.146.339-.219.531-.219.404 0 .75.325.75.75 0 .193-.073.384-.219.531l-2.717 2.717 2.727 2.728c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.384-.073-.53-.219l-2.729-2.728-2.728 2.728c-.146.146-.338.219-.53.219-.401 0-.751-.323-.751-.75 0-.192.073-.384.22-.531l2.728-2.728-2.722-2.722c-.146-.147-.219-.338-.219-.531 0-.425.346-.749.75-.749.192 0 .385.073.531.219z"></path></svg>
|
|
</span>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by gharsh11032000 - Tags: red, button, hover, shake */
|
|
.button {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
padding: 15px 20px;
|
|
background-color: #212121;
|
|
border: none;
|
|
font: inherit;
|
|
color: #e8e8e8;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
border-radius: 50px;
|
|
cursor: not-allowed;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease cubic-bezier(0.23, 1, 0.320, 1);
|
|
}
|
|
|
|
.button span {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.button::before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 100%;
|
|
height: 100%;
|
|
translate: 0 105%;
|
|
background-color: #F53844;
|
|
transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
|
|
}
|
|
|
|
.button svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
fill: #F53844;
|
|
transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
|
|
}
|
|
|
|
.button:hover {
|
|
animation: shake 0.2s linear 1;
|
|
}
|
|
|
|
.button:hover::before {
|
|
translate: 0 0;
|
|
}
|
|
|
|
.button:hover svg {
|
|
fill: #e8e8e8;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0% {
|
|
rotate: 0deg;
|
|
}
|
|
|
|
33% {
|
|
rotate: 10deg;
|
|
}
|
|
|
|
66% {
|
|
rotate: -10deg;
|
|
}
|
|
|
|
100% {
|
|
rotate: 10deg;
|
|
}
|
|
}
|
|
|
|
</style>
|