Beim Hovern über einen Button ein Rechteck (z.B) einblenden

Und zwar habe ich es bisher nicht geschafft, dass beim hovern über einen Button beispielsweise eine geometrische Form eingeblendet wird. Das einzige, was ich geschafft habe, ist, dass eine Box mit Text auftaucht. Mein Ziel ist es aber, dass beim hovern über einen Button ein Rechteck an einer bestimmten Position auf meiner Website auftaucht.
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Start Lang Cosmetics</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<style>
*{
margin:0;
padding:0;
}
body ,html{
display: flex;
flex-direction:column;
font-family: "Century Schoolbook L";
color: #993399;
background: whitesmoke;
background-image:url(/image/wald.jpg);
min-height:100vh;
height:100%;
}
#body_footer,
#body_left,
header,
#body_right,
#main_top,
#body_right,
footer
{
background: rgba(199, 199, 249, 0.95);
font-family: "Century Schoolbook L";
text-align: left;
font-size: 1em;
color: #953195;
justify-content:space-around;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX