Button hover, increase width on right side but left side fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="button-container">
        <button class="btn btn-cancel">
          Cancel
        </button>
        <button class="btn btn-next">
          Next
          <svg class="arrow-icon" fill="#ffffff" height="22px" width="22px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path id="XMLID_27_" d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255 s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0 c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"></path> </g></svg>
        </button>
      </div>
</body>
</html>


.button-container {
    display: flex;
    gap: 16px;
  }

  .btn {
    padding-block: 17px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }

  .btn-cancel {
    background-color: #E4EDF4;
    color: #464646;
    border: 1px solid transparent;
    width: 133px;
  }

  .btn-cancel:hover {
    background-color: #F5F6F8;
    border: 1px solid #3E77AA;
    color: #3E77AA
  }

  .btn-next {
    background-color: #1C9F56;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 133px;
    transition: all 0.3s ease-in-out;
    position: relative; /* Ensure the left side remains fixed */

    .arrow-icon {
      margin-left: 8px;
      transition: transform 0.3s ease-in-out;
    }
  }

  .btn-next::before {
    content: ''; /* Add a pseudo-element to allow width expansion */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 133px; /* Matches the initial button width */
    background-color: inherit;
    transition: width 0.3s ease-in-out;
    border-radius: inherit;
    z-index: -1; /* Keeps it behind the button content */
  }

  .btn-next:hover::before {
    width: 140px; /* Increase the width only on hover */
  }

  .btn-next:hover {
    background-color: #00883C;

    .arrow-icon {
      transform: translateX(5px);
    }
  }

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started