galaxy/Buttons/pamtbi_proud-mayfly-64.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>