To add a button on an image, you can use HTML and CSS. Here is an example code:

html
 
 
Copy code
<div class="image-container">
  <img src="your-image-url-here.jpg" alt="Image">
  <button class="button">Click me</button>
</div>

In the example code above, we have an image tag wrapped in a div with a class of "image-container". Then, we added a button with a class of "button" inside the same div.

To add some CSS and position the button over the image, you can set the image container to a relative position and set the button to an absolute position with a z-index higher than the image.

css
 
 
Copy code
.image-container {
  position: relative; /* set container to a relative position */
  width: 500px; /* set your desired width */
  height: 500px; /* set your desired height */
}

.button {
  position: absolute; /* set button to an absolute position */
  top: 50%; /* adjust the top position of the button */
  left: 50%; /* adjust the left position of the button */
  transform: translate(-50%, -50%); /* center the button */
  z-index: 2; /* set a higher z-index than the image */
  background-color: #007bff; /* set your desired background color */
  color: #fff; /* set your desired text color */
  border: none; /* remove button border */
  padding: 10px 20px; /* set your desired padding */
  cursor: pointer; /* change mouse cursor on hover */
}

Adjust the .image-container width and height properties to match the size of your image. You can also adjust the button's properties such as the background-color, color, padding, and cursor to suit your design.

In HTML & CSS, you can create an animated button by writing code for its styling and adding a keyframe animation. The animation for the button can be created by using the animation property followed by @keyframes command.

For example,

css
 
 
Copy code
.animated-button {
  background-color: #008CBA;
  color: #ffffff;
  font-size: 16px;
  padding: 10px 20px 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 15px 0 #006699;
  width: 350px;
  animation: example 1s infinite;
}

@keyframes example {
  0% {background-color: #008CBA;}
  50% {background-color: #006699;}
  100% {background-color: #008CBA;}
}

For more details, see this guide on Animista.