I have solved this request by myself but if someone is interested, here is the code I used.
Custom CSS
body {
position: relative;
}
#buttonCta {
position: fixed;
z-index: 999;
border-radius: 70px;
background-color: #0000FF;
border: 5px solid #F0FCD2;
text-align: center;
padding: 12px 25px;
cursor: move;
}
#buttonCta a {
font-family: SpaceMono-Regular;
color: #F0FCD2;
text-align: center;
text-transform: uppercase;
font-size: 60px;
cursor: pointer;
}
#buttonCta:hover {
background-color: #F0FCD2;
border: 5px solid #0000FF;
}
#buttonCta:hover a {
color: #0000FF;
}
@media only screen and (max-width: 601px) {
#buttonCta {
display: none;
}
}
CUSTOM HEAD CONTENT (JAVASCRIPT)
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
const cta = document.getElementById("buttonCta");
if((window.innerWidth > 601) && cta) {
var randomtop = Math.floor(Math.random() * 70);
var randomleft = Math.floor(Math.random() * 70);
cta.style.top = `${randomtop}vh`;
cta.style.left = `${randomleft}vw`;
dragElement(cta);
}
console.log(window.innerWidth > 601, cta)
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
});
</script>
CUSTOM HTML TOP
<div id="buttonCta">
<a href="LINK">TEXT ON THE BUTTON</a>
</div>