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);
    }
  }

Blog

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

Faisal Ahmed

Join Our Newsletter. No Spam, Only the good stuff.

Related