mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
121 lines
2 KiB
HTML
121 lines
2 KiB
HTML
<button>Button
|
|
<p>Button</p>
|
|
<p>Button</p>
|
|
<p>Button</p>
|
|
<p>Button</p>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by MuhammadHasann - Tags: button */
|
|
button {
|
|
position: relative;
|
|
padding: 13px 35px;
|
|
background: #2e323c;
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
color: #FFF;
|
|
border: 3px solid #2e323c;
|
|
border-radius: 8px;
|
|
transition: all .3s ease-in-out;
|
|
}
|
|
|
|
p:nth-child(1) {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
color: #FFF;
|
|
transition: all .3s ease-in-out;
|
|
z-index: -5;
|
|
}
|
|
|
|
p:nth-child(2) {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
color: #FFF;
|
|
transition: all .3s ease-in-out;
|
|
z-index: -5;
|
|
}
|
|
|
|
p:nth-child(3) {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
color: #FFF;
|
|
transition: all .3s ease-in-out;
|
|
z-index: -5;
|
|
}
|
|
|
|
p:nth-child(4) {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
color: #FFF;
|
|
transition: all .3s ease-in-out;
|
|
z-index: -5;
|
|
}
|
|
|
|
button:hover {
|
|
background: transparent;
|
|
box-shadow: 0 0 15px #2e323c;
|
|
}
|
|
|
|
button:hover p:nth-child(1) {
|
|
top: 0%;
|
|
filter: drop-shadow(0 0 5px #FFFFFF);
|
|
z-index: 1;
|
|
}
|
|
|
|
button:hover p:nth-child(2) {
|
|
top: -50%;
|
|
filter: drop-shadow(0 0 5px #FFFFFF);
|
|
z-index: 1;
|
|
}
|
|
|
|
button:hover p:nth-child(3) {
|
|
top: 100%;
|
|
filter: drop-shadow(0 0 5px #FFFFFF);
|
|
z-index: 1;
|
|
}
|
|
|
|
button:hover p:nth-child(4) {
|
|
top: 150%;
|
|
filter: drop-shadow(0 0 5px #FFFFFF);
|
|
z-index: 1;
|
|
}
|
|
|
|
button:active p:nth-child(1) {
|
|
top: -20%;
|
|
filter: drop-shadow(0 0 5px #FFFFFF);
|
|
z-index: 1;
|
|
}
|
|
|
|
button:active p:nth-child(2) {
|
|
top: -90%;
|
|
filter: drop-shadow(0 0 5px #FFFFFF);
|
|
z-index: 1;
|
|
}
|
|
|
|
button:active p:nth-child(3) {
|
|
top: 120%;
|
|
filter: drop-shadow(0 0 5px #FFFFFF);
|
|
z-index: 1;
|
|
}
|
|
|
|
button:active p:nth-child(4) {
|
|
top: 190%;
|
|
filter: drop-shadow(0 0 5px #FFFFFF);
|
|
z-index: 1;
|
|
}
|
|
</style>
|