Padavan,
<!DOCTYPE html>
<html class=''>
<head><meta charset='UTF-8'>
<style class="cp-pen-styles">
.myButt {
width: 100%;
display: flex;
}
.myButt ul {
margin: 40px auto;
}
.myButt ul li {
display: flex;
width: 100px;
height: 50px;
background-color: black;
list-style-type: none;
text-align: center;
}
.myButt ul li:hover {
box-shadow: inset 0px -4px 0px red;
border-right: 1px solid red;
border-left: 1px solid red;
}
.myButt ul li a {
display: inline-block;
color: red;
text-decoration: none;
margin: auto;
}
</style></head><body>
<div class="myButt">
<ul>
<li><a href="#" class="main">Ну ка наведи</a></li>
</ul>
</div>
</script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
function getRandomInt(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var myText = ["Не получилось, да?","Пробуй еще!","Почти вышло))"];
var a,b;
var butt = $(".myButt ul");
(function(){
butt.mouseover(function(){
var numMyText = getRandomInt(0, myText.length-1);
a = getRandomInt(0,500);
b = getRandomInt(0,500);
butt.css({"position": "absolute", "margin": a+"px "+b+"px"});
$(".main").html(myText[numMyText]);
});
}())
;
</script>
</body></html>