Show and hide links with hover

For this purpose you can use the > selector that indicates that it is a direct son of the father to refer to the button. Later, when you make hover in the div you can have the button displayed by modifying the property display . By default, we will have to indicate that the display property of the button is invisible ( display: none ).

Example:

#contenedor{
  height: 300px;
  width: 300px;
  background-color: red;
}

#boton{
  display: none;
}

#contenedor:hover > #boton{
  display: block;
}

<div id="contenedor">
    <button id="boton">Estas sobre el div</button>
</div>

The problem of the response of @ Error404 , is that with display: none; you remove the space occupied by the element and you can have undesired effects, as you will see in the next example:

#contenedor{
  height: 150px;
  width: 150px;
  background-color: red;
}

#boton{
  display: none;
}

#contenedor:hover > #boton{
  display: block;
}

<div id="contenedor">
  <p>OTRO ELEMENTO</p>
    <button id="boton">Estas sobre el div</button>
  <p>OTRO ELEMENTO</p>
</div>

The next example is with the property visibility , which occupies the site without being visible:

div {
  height: 150px;
  width: 150px;
  background-color: yellow;
}

button { 
  visibility: hidden; 
}

div:hover button {
  visibility: visible;
}

<div>
  <p>OTRO ELEMENTO</p>
    <button>Estas sobre el div</button>
  <p>OTRO ELEMENTO</p>
</div>

Info : It is not necessary to use the > selector since they are inside the div#contenedor element.