mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
93 lines
2.7 KiB
HTML
93 lines
2.7 KiB
HTML
<button class="button">
|
|
<span class="span">click on me</span>
|
|
<div class="button__bg button__bg-1"></div>
|
|
<div class="button__bg button__bg-2"></div>
|
|
<div class="button__bg button__bg-3"></div>
|
|
<div class="button__bg button__bg-4"></div>
|
|
<div class="button__bg button__bg-5"></div>
|
|
<div class="button__bg button__bg-6"></div>
|
|
<div class="button__bg button__bg-7"></div>
|
|
<div class="button__bg button__bg-8"></div>
|
|
<div class="button__bg button__bg-9"></div>
|
|
<div class="button__bg button__bg-10"></div>
|
|
<div class="button__bg button__bg-11"></div>
|
|
<div class="button__bg button__bg-12"></div>
|
|
<div class="button__bg button__bg-13"></div>
|
|
<div class="button__bg button__bg-14"></div>
|
|
<div class="button__bg button__bg-15"></div>
|
|
<div class="button__bg button__bg-16"></div>
|
|
<div class="button__bg button__bg-17"></div>
|
|
<div class="button__bg button__bg-18"></div>
|
|
<div class="button__bg button__bg-19"></div>
|
|
<div class="button__bg button__bg-20"></div>
|
|
<div class="button__bg button__bg-21"></div>
|
|
<div class="button__bg button__bg-22"></div>
|
|
<div class="button__bg button__bg-23"></div>
|
|
<div class="button__bg button__bg-24"></div>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by pamtbi - Tags: button, minecraft */
|
|
.button {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
grid-template-rows: repeat(4, 1fr);
|
|
width: 70px;
|
|
aspect-ratio: 3 / 2;
|
|
border: none;
|
|
border-radius: 0px;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
box-shadow: 0px 5px 0px 0px rgb(102,102,102);
|
|
transition: all .15s;
|
|
position: relative;
|
|
padding: 0
|
|
}
|
|
|
|
.button:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.button:active {
|
|
box-shadow: none;
|
|
transform: translateY(5px);
|
|
}
|
|
|
|
.button__bg {
|
|
height: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.button__bg-1, .button__bg-7, .button__bg-13, .button__bg-20, .button__bg-19, .button__bg-8, .button__bg-9, .button__bg-10, .button__bg-12 {
|
|
background: #494949;
|
|
}
|
|
|
|
.button__bg-6, .button__bg-4, .button__bg-5, .button__bg-14, .button__bg-15, .button__bg-16, .button__bg-21 {
|
|
background: #505050;
|
|
}
|
|
|
|
.button__bg-2, .button__bg-3, .button__bg-18, .button__bg-17 {
|
|
background: #5a5a5a;
|
|
}
|
|
|
|
.button__bg-11, .button__bg-22 {
|
|
background: #414141;
|
|
}
|
|
|
|
.button__bg-23, .button__bg-24 {
|
|
background: #535353;
|
|
}
|
|
|
|
.span {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 9px;
|
|
width: 100%;
|
|
color: rgb(223, 217, 189);
|
|
display: block;
|
|
text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
|
|
}
|
|
|
|
</style>
|