پیشنمایش زنده
کد HTML
<div class="button-mario-kart-8">
<p class="button-mario-kart-8-text">Start Grand Prix?</p>
<button class="button-mario-kart-8-button">
<div class="button-mario-kart-8-button-yellow">
<p class="button-mario-kart-8-button-yellow-text">OK</p>
</div>
<div class="button-mario-kart-8-button-yellow-back"></div>
</button>
<div class="button-mario-kart-8-button-black"></div>
<div class="button-mario-kart-8-corner1"></div>
<div class="button-mario-kart-8-corner2"></div>
<div class="button-mario-kart-8-corner3"></div>
<div class="button-mario-kart-8-corner4"></div>
</div>
کد CSS
.button-mario-kart-8 {
width: 25em;
height: 15em;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: absolute;
transform: scale(0.75);
}
.button-mario-kart-8-text {
color: white;
font-weight: bold;
font-style: italic;
display: flex;
justify-content: center;
font-size: 2em;
font-family: Arial, sans-serif;
text-shadow: 0.1em 0.1em rgb(0, 0, 0, 0.5);
position: relative;
}
.button-mario-kart-8-button {
cursor: pointer;
width: 22.5em;
height: 9em;
position: relative;
z-index: 3;
clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(#f4f2f0, #c4bfbb);
border: 0.15em solid #f4f2f0;
box-shadow: inset 0em 0.5em 1.5em white;
transform: scale(1);
transition: all 0.25s ease-in-out;
}
.button-mario-kart-8-button-yellow {
width: 20em;
height: 8em;
position: relative;
background: linear-gradient(#fff80d, #eeaf0c);
z-index: 2;
clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
box-shadow: inset 0em 0.5em 1.5em white;
transform: translateX(0%);
}
.button-mario-kart-8-button-yellow-back {
position: absolute;
width: 20em;
height: 8em;
background-color: #fff80d;
filter: blur(1em);
transform: scale(0.85);
transition: all 0.25s ease-in-out;
}
.button-mario-kart-8-button-yellow-text {
font-size: 5em;
font-weight: bold;
font-style: italic;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
text-shadow: -0.025em 0em white;
color: rgb(48, 48, 48);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.button-mario-kart-8-button-black {
width: 19em;
height: 8em;
position: absolute;
background-color: rgba(48, 48, 48, 0.566);
z-index: 2;
clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
bottom: 0.5em;
border-radius: 0%;
transition: all 0.25s ease-in-out;
transform: scale(1);
}
.button-mario-kart-8-button:hover {
transform: scale(1.05);
transition: all 0.25s ease-in-out;
}
.button-mario-kart-8:hover .button-mario-kart-8-button-black {
transition: all 0.25s ease-in-out;
transform: scale(1.1);
}
.button-mario-kart-8-corner1,
.button-mario-kart-8-corner2,
.button-mario-kart-8-corner3,
.button-mario-kart-8-corner4 {
width: 1.5em;
height: 4em;
background: linear-gradient(#eeaf0c, #fff80d);
position: absolute;
border-radius: 0.25em;
z-index: 1;
transition: all 0.25s ease-in-out;
animation: box-shadow-yellow 1s linear infinite;
}
.button-mario-kart-8-corner1 {
transform: rotate(0deg) skewX(-40deg);
left: 2.5em;
bottom: 6em;
}
.button-mario-kart-8-corner2 {
transform: rotate(0deg) skewX(40deg);
left: 2.5em;
bottom: -0.5em;
}
.button-mario-kart-8-corner3 {
transform: rotate(0deg) skewX(40deg);
right: 2.5em;
bottom: 6em;
}
.button-mario-kart-8-corner4 {
transform: rotate(0deg) skewX(-40deg);
right: 2.5em;
bottom: -0.5em;
}
.button-mario-kart-8:hover .button-mario-kart-8-corner1,
.button-mario-kart-8:hover .button-mario-kart-8-corner2 {
left: 1.5em;
}
.button-mario-kart-8:hover .button-mario-kart-8-corner3,
.button-mario-kart-8:hover .button-mario-kart-8-corner4 {
right: 1.5em;
}
@keyframes box-shadow-yellow {
0% {
box-shadow: 0em 0em 0em 0em #fff80d55;
}
80% {
box-shadow: 0em 0em 0em 0.25em #fff80d55;
}
100% {
box-shadow: 0em 0em 0em 0.5em #fff80d00;
}
}
.button-mario-kart-8-button-yellow:active {
animation: button-yellow 0.25s;
}
.button-mario-kart-8-button-yellow:active
~ .button-mario-kart-8-button-yellow-back {
transform: scale(1);
}
@keyframes button-yellow {
0% {
transform: translateX(0%);
filter: blur(0em) brightness(100%);
}
33% {
transform: translateX(-5%);
filter: blur(0.25em) brightness(115%);
}
66% {
transform: translateX(5%);
filter: blur(0.25em) brightness(115%);
}
100% {
transform: translateX(0%);
filter: blur(0em) brightness(100%);
}
}