html button lol

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="styles.css">
   <script src="script.js"></script>
</head>
<body>
   <button class="my-button" data-image-link="https://example.com/image.png">
      Click me
   </button>
<!--- css --->
<style>
.my-button {
   background-color: #4CAF50;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
}

.my-button:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url('placeholder.png');
   background-size: cover;
   background-position: center;
   transition: transform 0.3s ease;
   transform: translateX(-100%);
}

.my-button:hover:before {
   transform: translateX(0);
}
</style>

<!--- javascript --->

<script>
document.querySelector('.my-button').addEventListener('click', function() {
   const imageLink = this.getAttribute('data-image-link');
   const iframe = document.createElement('iframe');
   iframe.src = imageLink;
   iframe.width = '640';
   iframe.height = '360';
   iframe.style.border = 'none';
   iframe.style.overflow = 'hidden';
   iframe.style.marginLeft = '-200px';
   document.body.appendChild(iframe);
});
</script>

im lol 😂