<div class="container">
    <button class="button">Tricky Button</button>
  </div>

body {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     position: relative;
     background: #eee;
}

.container {
     overflow: hidden;
     width: 100%;
     max-width: 600px;
     margin: 0 auto;
     position: relative;
     background: #fff;
     height: 200px;
     border-radius: 12px;
     display: flex;
     justify-content: center;
     align-items: center;
}

.button {
     display: inline-flex;
     background-color: #3f51b5;
     position: relative;
     transition: transform 0.3s ease;
     padding: 10px 20px;
     text-align: center;
     border-radius: 5px;
     color: #fff;
     font-size: 16px;
     font-family: "Roboto", sans-serif;
     white-space: nowrap;
}

.button:hover {
     transform: translateX(150px);
}