<img src="https://raw.githubusercontent.com/BlackStar1991/Pictures-for-sharing-/master/Netgame/bgAreaFreeSpins.jpg" alt="Background Cloverstones">
<div class="toContactForm">
<div class="toContactForm_leprechaun"></div>
<a class="toContactForm_button" type="button" href="https://www.netgamenv.com/" target="_blank">
<span>V</span>
<span>i</span>
<span>s</span>
<span>i</span>
<span>t</span>
<span> </span>
<span>s</span>
<span>i</span>
<span>t</span>
<span>e</span>
</a>
</div>
body {
margin: 0;
background-color: #000;
height: 100vh;
overflow: hidden;
}
img {
width: 100%;
object-fit: contain;
}
.toContactForm {
position: fixed;
right: 0;
top: 10%;
z-index: 16;
}
.toContactForm_leprechaun {
width: 220px;
height: 290px;
box-sizing: border-box;
background: url("https://www.netgamenv.com/wp-content/themes/netgeme_2018/image/toContactForm/leprechaun-sprite.png")
0 50%;
animation: play 3139ms steps(73) infinite;
}
@keyframes play {
to {
background-position: -16060px;
}
}
.toContactForm_button {
position: absolute;
right: -1px;
top: 240px;
width: 58px;
height: 270px;
background-color: #00e676;
border: 1px solid #009169;
box-shadow: 4px 2px 16px rgba(0, 0, 0, 0.32);
border-top-left-radius: 24px;
text-decoration: none;
border-bottom-left-radius: 24px;
transition: 0.1s ease-in;
}
.toContactForm_button:focus,
.toContactForm_button:hover {
background-color: #66ffa6;
}
.toContactForm_button span {
position: relative;
display: block;
width: 58px;
text-align: center;
color: #000;
font-weight: 900;
font-size: 18px;
font-family: sans-serif;
line-height: normal;
text-transform: uppercase;
}
.toContactForm_button span:nth-of-type(1) {
margin-top: 16px;
}
.toContactForm_button span:nth-of-type(6) {
margin-bottom: 16px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.