console
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<button class="noselect">8-Bit</button>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-color: #f9c5d1;
background-image: linear-gradient(315deg, #f9c5d1 0%, #9795ef 74%);
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
button {
width: 150px;
height: 50px;
font-size: 25px;
font-family: 'Press Start 2P', cursive;
cursor: pointer;
border: none;
border-radius: 10px;
transition: 500ms;
background: url("https://assets.codepen.io/3305358/mariobg.png");
background-size: auto 50px;
}
button:hover {
height: 150px;
background-size: auto 150px;
animation: move 20s infinite linear;
color: white;
text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
border-radius: 2px;
}
button:focus {
outline: none;
}
@keyframes move{
0%
{background-position-x: 0;}
100%
{background-position-x: -2222.2222px;}
}
}