mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
86 lines
2.3 KiB
HTML
86 lines
2.3 KiB
HTML
<button class="button">
|
|
<span class="button__span">Button</span>
|
|
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by Rodrypaladin - Tags: simple, animation, black, button, text animation, creative, click effect, click animation */
|
|
.button {
|
|
font-size: 2em;
|
|
padding: 10px 20px;
|
|
background-color: transparent;
|
|
transition: all 0.2s ease-out;
|
|
border: none;
|
|
}
|
|
|
|
.button__span {
|
|
color: #131313;
|
|
transition: all 0.2s ease-out;
|
|
background-color: #e7e5e4;
|
|
letter-spacing: .15em;
|
|
text-shadow: 1px -1px 0 #767676,
|
|
-1px 2px 1px #737272,
|
|
-2px 4px 1px #767474,
|
|
-3px 6px 1px #787777,
|
|
-4px 8px 1px #7b7a7a,
|
|
-5px 10px 1px #7f7d7d,
|
|
-6px 12px 1px #828181,
|
|
-7px 14px 1px #868585,
|
|
-8px 16px 1px #8b8a89,
|
|
-9px 18px 1px #8f8e8d,
|
|
-10px 20px 1px #949392,
|
|
-11px 22px 1px #999897,
|
|
-12px 24px 1px #9e9c9c,
|
|
-13px 26px 1px #a3a1a1,
|
|
-14px 28px 1px #a8a6a6,
|
|
-15px 30px 1px #adabab,
|
|
-16px 32px 1px #b2b1b0,
|
|
-17px 34px 1px #b7b6b5,
|
|
-18px 36px 1px #bcbbba,
|
|
-19px 38px 1px #c1bfbf,
|
|
-20px 40px 1px #c6c4c4,
|
|
-21px 42px 1px #cbc9c8,
|
|
-22px 44px 1px #cfcdcd,
|
|
-23px 46px 1px #d4d2d1,
|
|
-24px 48px 1px #d8d6d5,
|
|
-25px 50px 1px #dbdad9,
|
|
-26px 52px 1px #dfdddc,
|
|
-27px 54px 1px #e2e0df,
|
|
-28px 56px 1px #e4e3e2;
|
|
}
|
|
|
|
.button__span:hover {
|
|
text-shadow: -1px -1px 0 #767676,
|
|
1px 2px 1px #737272,
|
|
2px 4px 1px #767474,
|
|
3px 6px 1px #787777,
|
|
4px 8px 1px #7b7a7a,
|
|
5px 10px 1px #7f7d7d,
|
|
6px 12px 1px #828181,
|
|
7px 14px 1px #868585,
|
|
8px 16px 1px #8b8a89,
|
|
9px 18px 1px #8f8e8d,
|
|
10px 20px 1px #949392,
|
|
11px 22px 1px #999897,
|
|
12px 24px 1px #9e9c9c,
|
|
13px 26px 1px #a3a1a1,
|
|
14px 28px 1px #a8a6a6,
|
|
15px 30px 1px #adabab,
|
|
16px 32px 1px #b2b1b0,
|
|
17px 34px 1px #b7b6b5,
|
|
18px 36px 1px #bcbbba,
|
|
19px 38px 1px #c1bfbf,
|
|
20px 40px 1px #c6c4c4,
|
|
21px 42px 1px #cbc9c8,
|
|
22px 44px 1px #cfcdcd,
|
|
23px 46px 1px #d4d2d1,
|
|
24px 48px 1px #d8d6d5,
|
|
25px 50px 1px #dbdad9,
|
|
26px 52px 1px #dfdddc,
|
|
27px 54px 1px #e2e0df,
|
|
28px 56px 1px #e4e3e2;
|
|
}
|
|
|
|
.button:active .button__span {
|
|
text-shadow: none;
|
|
}
|
|
</style>
|